CSS特异性的计算方法是什么？

Question

研究特异性时，我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/

它指出特异性是CSS的一个得分系统。它告诉我们，元素值为1分，类值为10分，ID值为100分。它还继续说这些分数会被累加，总分就是选择器的特异性。

例如：

body = 1分

body .wrapper = 11分

body .wrapper #container = 111分

因此，使用这些分数，我期望以下的CSS和HTML会导致文本变为蓝色：

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              这应该是蓝色的。
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

为什么文本是红色的，当15个类等于150分，而1个ID等于100分？

显然，这些分数不仅仅是累加的；它们是连接在一起的。在这里了解更多 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

这是否意味着我们选择器中的类 = 0,0,15,0 或者 0,1,5,0？

(我的直觉告诉我应该是前者，因为我们知道ID选择器的特异性是这样的：0,1,0,0)

Answer 1

好问题。

我不能确定 - 我找到的所有文章都避免了多个类的示例，例如这里 - 但我假设当涉及比较特定性在类选择器和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时将其转换为十进制。

Answer 2

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作为基数。