属性选择器优先级

最新推荐文章于 2024-03-05 17:37:41 发布

原创最新推荐文章于 2024-03-05 17:37:41 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #选择器的优先级 #属性选择器

web前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍CSS中属性选择器的使用方法，包括以特定字符开头 (^)、结尾 ($) 和包含 (*) 的选择器，并解释了不同选择器的优先级顺序。

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选择器

属性选择器 优先级

属性选择器优先级