确定CSS特异性分数

时间:2017-08-14 10:43:31

标签: css css-selectors css-specificity

如何计算这些声明块的特异性分数:

body div main section div ul li p strong span a {}

特异性= 1 * 11 = 11

.someClass {}

特异性= 10 * 1 = 10

那么,第一个会赢吗?

1 个答案:

答案 0 :(得分:1)

W3C specification州:

  

选择器的特异性计算如下:

     
      
  • 计算选择器中的ID选择器数量(= a)
  •   
  • 计算选择器中的类选择器,属性选择器和伪类的数量(= b)
  •   
  • 计算选择器中的类型选择器和伪元素的数量(= c)
  •   
  • 忽略通用选择器
  •   
     

否定伪类中的选择器与其他选择器一样,   但否定本身并不算作伪阶级。

     

示例:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
\#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
\#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */
     

连接三个数字a-b-c(在具有大碱基的数字系统中)给出了特异性。

现在我将尝试清楚它是如何实际实现的。 IE浏览器。 10个htmls标签不等于一个类,它更像是这样:

id : class : tag : pseudo-elements

第一个例子:

body div main section div ul li p strong span a {}

特异性:0 : 0 : 11 : 0

第二个例子:

.someClass {}

特异性:0 : 1 : 0 : 0

11个元素不会赢得一个类。更高级别总是获胜,所以即使超过1000个课程也永远不会超过id(无论如何,使用id的样式都是相当不好的练习)。

不要忘记级联。稍后在源文件中声明的具有相同特异性的样式将在冲突的情况下获胜。除了!important之外,内联样式总是会赢得任何东西。