css选择器优先级判定

CSS selector 优先级

理解1

：

如何确定CSS的优先级？这里我们要先引入一个机制，

分别用4个数字（a，b，c，d）表示优先级组合，比如1，1，1，1和0，1，0，1。它们的意思分别是：

第一个数字（a）表示style属性，优先级最高。由于一般都是class样式，所以该值一般都是0。

第二个数字（b）是该CSS选择器上的id数量的总和，一般都是1个。

第三个数字（c）是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。

这里包括class（.btn）和属性CSS选择器（比如li[id=red]）。

第四个数字（d）计算元素（就像table、p、div等）和伪元素（就像first-child等）。

通用CSS选择器（*）是0优先级。

如果两个CSS选择器有同样的优先级，在样式表中后面的那个起作用。



例：

#leftbar li#first { color: red; }

#leftbar li:first-child{ color: blue; }

结果肯定是第1个比第2个优先级高，因为第1个的优先级是0，2，0，1，而第2个是0，1，0，2。

理解2

：

分为 id > class > 标签 > 伪类 四类，计算每个类别中的选择器个数，然后先比较 id 个数，越多越优先，在 id 个数相同的情况下，再比较 class 个数，以此类推。带有
!important 的优先级最高，都带 !important 的再以之前的顺序计算优先级。

理解3

：

CSS Specificity由四个部分组成，如0，0，0，0.

计算规则如下：

每多一个html内部的内联样式，加1，0，0，0

每多一个id选择器，加0，1，0，0

每多一个类选择器，属性选择器或伪类选择器，加0，0，1，0

每多一个元素选择器，伪元素选择器，加0，0，0，1

每多一个通配选择符（*），加0，0，0，0

!important是最优先应用的。