[转]CSS Selector的优先级

时间：2023-01-15 18:10:55

 

[转]CSS Selector的优先级

上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题～_～！


猜一下

01    <!DOCTYPE HTML>
02    <html>
03    <head>
04    <meta charset="utf-8">
05    <style type="text/css">
06    body{font-family: "Microsoft YaHei";}
07    .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}
08    #b{color:green;}
09    </style>
10    </head>
11     
12    <body>
13        <div class="a1">
14        <div class="a2">
15        <div class="a3">
16        <div class="a4">
17        <div class="a5">
18        <div class="a6">
19        <div class="a7">
20        <div class="a8">
21        <div class="a9">
22        <div class="a10">
23        <div class="a11" id="b">
24            CSS Selector的优先级
25        </div>
26        </div>
27        </div>
28        </div>
29        </div>
30        </div>
31        </div>
32        </div>
33        </div>
34        </div>
35        </div>
36    </body>
37    </html>

答案很明显就是你看到的那样儿，究竟为什么一时又很难说的清楚。

 

今天突然想到精通css里讲到过关于css特殊性的计算，原来是酱紫的…

所有的selector都被分配一个数值（包含内联），将所有selector值相加得到最终优先级。但是计算中并不是满10进1来计算，而是采用一个没有指定的更高的基数。保证高级别的selector(id)不被那11个或者更多低级的selector组合超出。
selector的特殊性分四个等级：a,b,c,d可将a看成是最高位以此类推

[转]CSS Selector的优先级

  • 如果样式为内联a=1
  • b为id的总数
  • c为class, pseudo-class, and attribute selectors总数

得出此表：
[转]CSS Selector的优先级

标签：

相关文章