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作為基數。