Wie wird die CSS-Spezifität berechnet?

Question

Bei meiner Recherche zur Spezifität bin ich auf diesen Blog gestoßen – http://www.htmldog.com/guides/cssadvanced/speciality/, in dem es heißt, dass es sich bei der Spezifität um ein Bewertungssystem für CSS handelt. Es sagt uns, dass der Elementwert 1 Punkt, der Klassenwert 10 Punkte und der ID-Wert 100 Punkte beträgt. Weiter heißt es, dass diese Bewertungen addiert werden und die Gesamtpunktzahl die Spezifität des Selektors darstellt. Zum Beispiel: body=1 Punkte body.wrapper=11 Punkte body.wrapper#container=111 Punkte also

P粉523335026 · Answer

好问题。

我不能确定 - 我找到的所有文章都避免了多个类的示例，例如这里 - 但我假设当涉及比较特定性在类选择器和ID之间时，类只会被计算为一个值为15的值，无论它有多详细。

这与我对特定性行为的经验相符。

然而，必须有一些类的堆叠，因为

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

比

.o

更具体，我唯一的解释是堆叠类的特定性只针对彼此计算，而不针对ID计算。

更新：我现在有点明白了。这不是一个积分系统，关于类权重为15分的信息是不正确的。这是一个非常好解释的4部分编号系统，可以在这里找到。

起始点是4个数字：

style  id   class element
0,     0,   0,    0

根据W3C关于特定性的解释，上述规则的特定性值为：

#a            0,1,0,0    = 100
classes       0,0,15,0   = ...请参见评论

这是一个具有非常大（未定义？）基数的编号系统。

我的理解是，由于基数非常大，第4列中的任何数字都无法击败第3列中大于0的数字，第2列也是如此，第1列也是如此.... 这个理解正确吗？

我想知道是否有人对数学有更好的理解，能够解释这个编号系统以及如何在各个元素大于9时将其转换为十进制。

P粉920835423 · Answer

Pekka的回答在实际上是正确的，也可能是思考这个问题的最佳方式。

然而，正如许多人已经指出的那样，W3C CSS推荐规范指出：“将三个数字a-b-c（在一个大基数的数字系统中）连接起来给出了特异性。”所以我内心的极客就必须弄清楚这个基数有多大。

结果发现，实现这个标准算法的“非常大的基数”（至少由4个最常用的浏览器^*）是256或2⁸。

这意味着用0个id和256个类名指定的样式将会覆盖只用1个id指定的样式。我用一些fiddles进行了测试:

255个类名不足以覆盖1个id
...但是256个类名足以覆盖1个id
...并且256个标签名足以覆盖1个类名
...但是，遗憾的是256个id不足以覆盖1个内联样式（更新于2012/8/15 -- 您将需要使用!important）

因此，实际上存在一个“点数系统”，但它不是基于10进制，而是基于256进制。下面是它的工作原理：

(2⁸)²或65536，乘以选择器中id的数量

(2⁸)¹或256，乘以选择器中类名的数量
(2⁸)⁰或1，乘以选择器中标签名的数量

这对于简单的概念传达来说并不是很实用。
这可能是为什么关于这个主题的文章一直使用基于10进制的原因。

***** [Opera使用2¹⁶（见karlcow的评论）。其他一些选择器引擎使用无穷大 - 实际上没有点数系统（见Simon Sapin的评论）。]

更新，2014年7月：
正如Blazemonger今年早些时候指出的，webkit浏览器（Chrome，Safari）现在似乎使用比256更高的基数。也许是2¹⁶，像Opera一样？IE和Firefox仍然使用256。

更新，2021年3月：
Firefox不再使用256作为基数。