属性选择器优先级

最新推荐文章于 2024-04-16 16:18:11 发布

one_world-one_dream

最新推荐文章于 2024-04-16 16:18:11 发布

阅读量1.7k

点赞数

分类专栏： web前端文章标签： html 选择器的优先级属性选择器

本文链接：https://blog.csdn.net/Fly_hello/article/details/73863012

版权

web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.属性选择器

^ 表示属性以某一个字符开头，匹配以某一个字符开头的属性

 span[test^="a"]{
            color: rgb(200, 100, 100);
        }

$ 匹配属性以某字符结尾的标签

span[test$="c"]{
            color: green;
        }

* 通配符匹配属性中包含某一个字符

span[test*="b"]{
            color: blue;
        }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       
        span[test^="a"]{
            color: rgb(200, 100, 100);
        }
       
        span[test$="c"]{
            color: green;
        }
        span[test*="b"]{
            color: blue;
        }
    </style>
</head>
<body>
    <!--test="abc" 属性-->
    <span test="abc">111111111111111</span>
    <span test="ab">222222222222222</span>
    <span test="bc">333333333333333</span>
</body>
</html>
2.选择器的优先级

跟样式的先后顺序没有一点关系

标签名选择   1

class 选择器   伪类选择器和属性   10

id 选择器   100

行内样式   1000

!important   顶级

注意：span:nth-child(1)   优先级为  10+1=11

：nth-child  10

span    1

所以：span:nth-child(1)>class选择器

one_world-one_dream

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
属性选择器优先级

1.属性选择器^ 表示属性以某一个字符开头，匹配以某一个字符开头的属性 span[test^="a"]{ color: rgb(200, 100, 100); }$ 匹配属性以某字符结尾的标签span[test$="c"]{ color: green; }* 通配
复制链接

扫一扫