css基本知识之优先级

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 相同权重,后面的覆盖全面的样式

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64705.shtml

张贴在3