CSS的选择器-2.5-选择器权重-通配符0-标签1-类、伪类、属性10-id100-内联1000-特殊最高!imporant

74 阅读 0 评论 49 点赞

我是靠谱客的博主灵巧手套，这篇文章主要介绍CSS的选择器-2.5-选择器权重-通配符0-标签1-类、伪类、属性10-id100-内联1000-特殊最高!imporant，现在分享给大家，希望可以做个参考。

前边，我们学习了很多种的选择器，接下来我们来探讨一下这些选择器如果都作用在一个元素上，那到底哪个选择器，最终能够生效呢？

1.什么是选择器的权重
一个小例子引发的思考
再回味一下层叠样式表单的本质
【div {
color: green;
color: blue;
color: red;
}】

2.权重规则
通配符*选择器的权重：0
标签选择器的权重：1
类、伪类、属性选择器的权重：10
id选择器的权重：100
内联样式的权重：1000
特殊处理：! important(强制使用某一属性)
如： color: green ! important;

小例子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权重</title>
    <style>
        div {
            color: green ! important;
            color: blue;
            color: red;
        }
        #title {
            color: pink;
        }
        .title {
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="title" class="title" style="color: gray;">华为云在线教育解决方案</div>
</body>
</html>

小例子：：
1+100=101【大厂面试经常提问】
表现为橘色

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权重</title>
    <style>
        div {
            color: green ;
            color: blue;
            color: red;
        }
        #title {
            color: pink;   /*100权重*/
        }
        .title {
            color: yellow; /*10*/
        }
        /* 表现为橘黄色 */
        div#title { 
            color: orange;/* 1+100 =101*/
        }
    </style>
</head>
<body>
    <div id="title" class="title" >华为云在线教育解决方案</div>
</body>
</html>