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/pecificity/

Es besagt, dass Spezifität ein Bewertungssystem für CSS ist. 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 Punkt

body .wrapper = 11 Punkte

body .wrapper #container = 111 Punkte

Bei Verwendung dieser Werte würde ich also erwarten, dass das folgende CSS und HTML dazu führt, dass der Text blau wird:

#a {
    Farbe Rot;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  Farbe blau;
}

<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">
                              Dies sollte blau sein.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Warum ist der Text rot, wenn 15 Klassen 150 Punkte und 1 ID 100 Punkte entsprechen?

Offensichtlich summieren sich diese Ergebnisse nicht einfach, sie hängen zusammen. Erfahren Sie hier mehr: http://www.stuffandnonsense.co.uk/archives/css_speciality_wars.html

Bedeutet das, dass die Klasse in unserem Selektor = 0,0,15,0 oder 0,1,5,0 ist?

(Meine Intuition sagt mir, dass es Ersteres sein sollte, weil wir wissen, dass die Spezifität des ID-Selektors so ist: 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作为基数。