css基本知识之优先级

 

css Specificity中文一般译为css优先级、css权重。相比权重，优先级更好理解。简单理解就是一个DOM元素有多个css样式设置，优先级高的那个样式被应用，其他css设置不生效的问题，这是因为在其他地方定义了一个更高的优先级样式，从而导致其他地方设置的样式不生效。

 

根据w3c标准 这个优先级是根据计算选择者的特性来决定，可以理解为根据选择器的类型来决定，他们的类型分为a、b、c，他们的数目计算规则如下，在比较权重时, 按照 a => b => c 的顺序进行比较。

 

计算规则

计算选择器中ID选择器的数量（= a）

计算选择器中的类选择器，属性选择器和伪类的数量（= b）

计算选择器中类型选择器和伪元素的数量（= c）

忽略通用选择器、not()伪类

给元素添加的内联样式 (例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。

!important 例外规则，当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明

复制代码

1 * / * a = 0 b = 0 c = 0->特异性= 0 * /

2 LI / * a = 0 b = 0 c = 1->特异性= 1 * /

3 UL LI / * a = 0 b = 0 c = 2->特异性= 2 * /

4 UL OL + LI / * a = 0 b = 0 c = 3->特异性= 3 * /

5 H1 + * [REL = up] / * a = 0 b = 1 c = 1->特异性= 11 * /

6 UL OL LI.red / * a = 0 b = 1 c = 3->特异性= 13 * /

7 LI.red.level / * a = 0 b = 2 c = 1->特异性= 21 * /

8 ＃x34y / * a = 1 b = 0 c = 0->特异性= 100 * /

9 ＃s12：not（FOO）/ * a = 1 b = 0 c = 1->特异性= 101 * /

复制代码

当有重复的选择器会累加计算 如 LI.red.level / * a = 0 b = 2 c = 1->特异性= 21

!important > 行内 > a > b > c

如果a、b、c 相同权重，后面的覆盖全面的样式