关于CSS Selector的优先级-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11097/article/details/82065486

用CSS这么些年，从来没从算法级别考虑过它的优先级原理，只是凭经验记住类似“id最大，class其次”这种tip。今儿看到一篇讲css优先级算法的文章，豁然开朗，引过来，记录一下。

其实CSS的算法就是下面这张图，

解释一下：

CSS中主要有 style， #， .，tag，四种 selector 。按照顺序分别占据*,*,*,*的第1，2，3，4个位置。将一串层叠表达式中出现的selector分别在对应位置上叠加可得到一串数字。但需要比较css优先级时，只要比较这串数字即可。上面表中的例子不够鲜明，我们可以举个极端的例子。一个div，被11个div包含，本身既具有id又具有class。即：

<html>
<head>
<style type="text/css">
 .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12{color:red;}
#b{color:green;}
</style>
</head>
<body>
<div class="a1"><div class="a2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10"><div class="a11">
<div class="a12" id="b">
     CSS Selector的优先级
</div>
</div></div></div></div></div></div></div></div></div></div></div>

最里层的div拥有两个css串，第一个串的值是0,0,12,0，第二个串是0,1,0,0。两串值的比较是单纯的位比较，按照从第一位到第四位的比较顺序。因此第二个串的值比第一个大，这段代码的结果是字体成绿色。

我们做一个小的改动，给外层的其中一个div增加id属性，即

<html>
<head>
<style type="text/css">
 .a1 #b2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12{color:red;}
#b{color:green;}
</style>
</head>
<body>
<div class="a1"><div class="a2" id="b2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10">
<div class="a11">    
<div class="a12" id="b">
     CSS Selector的优先级
    </div>
</div>
</div></div></div></div></div></div></div></div></div></div>

此时，第一个串的值是0,1,11,0，第二个串是0,1,0,0。第二位相同，比较第三位，11>0，因此字体显示红色。

有人提出对于那些特殊的selector，如伪类，这个我再查找一下再给结论。

答：

伪类和属性选择与属性值一样，占据第三个位置，即 0,0,1,0

伪元素与一般元素一样，占据第四个位置，即0,0,0,1

继承属性、通配符对特殊性没有任何贡献

因为继承属性没有任何特殊性，所以对于某些元素继承的属性可能不会生效，原因是浏览器本身也有自己的样式表，比如超链接元素（a），可能:link会是蓝色，此时如果你不对a做专门的样式配置，那么它就会使用浏览器的样式。

有的时候，网站编程人员的样式表会与读者的样式表冲突，此时也有一个权重顺序。由大到小为：

1. 读者的重要声明

2. 开发人员的重要声明

3. 开发人员的正常声明

4. 读者的正常声明