CSS选择器优先级

原理

CSS选择器的优先级关系是:

内联 > ID选择器 > 类选择器 > 标签选择器

《CSS REFACTORING》中提到了算法的过程 :

A specificity is determined by plugging numbers into (a, b, c, d):

If the styles are applied via the style attribute, a=1; otherwise, a=0.
b is equal to the number of ID selectors present.
c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
d is equal to the number of type selectors and pseudoelements present.

即优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器出现的次数;
C 的值等于类选择器和属性选择器和伪类出现的总次数;
D 的值等于标签选择器和伪元素出现的总次数。

例如：

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

优先级比较规则：

从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的

例子

有如下html代码：

1
2
3

<div id="b">
    <a href="" class="a" id="a">ALink</a>
</div>

如果设置css样式：

1 2	#b a {color:red;} #a {color: green;}

问题：#b a生效，还是#a生效?

答案：ALink

解析：

1 2	#b a /* (0, 1, 0, 1) / #a / (0, 1, 0, 0) */

比较得出 #b a优先级更高

特例

如果我们给#a的css后加上!important

那么#a的优先级变为最高，甚至比在html标签上加style的优先级还要高。

比如如下代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>CSS Test</title>
  <style>
    #a{ color: green !important; }  
  </style>
 </head>
 <body>
  <div id="b">
   <a href="" id="a" style="color:blue">ALink</a> 
  </div>
 </body>
</html>

显示的结果 ALink
如果在标签内联样式加入!important那么显示 ALink