CSS3|属性选择器

最新推荐文章于 2021-08-04 03:32:23 发布

猫天意

最新推荐文章于 2021-08-04 03:32:23 发布

阅读量223

点赞数

分类专栏：前端之美文章标签： css3 css html html5

本文链接：https://blog.csdn.net/weixin_46264660/article/details/111312064

版权

前端之美专栏收录该内容

8 篇文章 0 订阅

订阅专栏

属性选择器

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201217113935801.png

注：类选择器、属性选择器、伪类选择器，权重为 10
CSS

<style>
		button {
            cursor: pointer;
        }
        /* 属性选择器权重 高于标签选择器 */
        button[disabled] {
            cursor: default;
        }
         /* 2. 属性等于值 */
        input[type="search"]{
            color: #f50;
        }
        /* 3. 以某个值开头的 属性值 */
        div[class^="icon"] {
            color: red;
        }
        /* 4. 以某个值结尾的 */
        div[class$="icon"] {
            color: green;
        }
        /* 5. 可以在任意位置的 */
        div[class*="icon"] {
            color: blue;
        }
</style>

HTML

<body>
  	<button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</button>
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框"><br>
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="iicon3">图标4</div>
    <div class="absicon">图标5</div>
</body>

效果截图：
在这里插入图片描述

点wo下一篇伪元素选择器

猫天意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3|属性选择器

文章目录属性选择器属性选择器注：类选择器、属性选择器、伪类选择器，权重为 10CSS<style> button { cursor: pointer; } /* 属性选择器权重高于标签选择器 */ button[disabled] { cursor: default; } /* 2. 属性等于值 */ input[type="sea
复制链接

扫一扫