什么是CSS选择器权重？

即使在不太复杂的样式表中，要寻找同一元素可能有两个或者更多规则，当同一元素被多个不同来源的样式规则设置了样式后，如何处理样式规则的冲突，显示元素最后的样式，用到的计算规则就是CSS选择器的权重规则。

根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

特殊性

为了计算规则的特殊性，给每种选择器都分配一个数字值。然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。特殊性的计算不是以10为技术的，而是采用一个更高的未指定的基数。这能确保非常特殊的选择器（比如ID选择器）不会被大量一般选择器（比如类型选择器）所超越。但是，为了简化，如果在一个特定选择器中的选择器数量少于10个，那么可以以10为基数计算特殊性。

选择器的特殊性分成4个成分等级：a, b, c 和 d。

  • 如果样式是行内样式，那么a=1
  • b等于ID选择器的总数
  • c等于类,伪类和属性选择器的数量
  • d等于类型选择器和伪元素选择的数量

使用这些规则可以计算任何CSS选择器的特殊性。下面的表格给出了一系列选择器以及相应的特殊性。

选择器

特殊性

以10为技术的特殊性

Style=" "

1,0,0,0

1000

#wrapper #content {}

0,2,0,0

200

#content .name {}

0,1,1,0

110

div#ontent {}

0,1,0,1

101

#content {}

0,1,0,0

100

p.comment .name {}

0,0,2,1

21

p.comment {}

0,0,1,1

11

div p {}

0,0,0,2

2

p {}

0,0,0,1

1

用style属性编写的规则总是比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。如果两个规则的特殊性相同，那么后定义的规则优先。