CSS特異性的計算方法是什麼？
P粉823268006
2023-08-23 09:46:01
<p>研究特異性時，我偶然發現了這個部落格 - http://www.htmldog.com/guides/cssadvanced/specificity/ </p>
<p>它指出特異性是CSS的一個得分系統。它告訴我們，元素值為1分，類別值為10分，ID值為100分。它也繼續說這些分數會被累積，總分就是選擇器的特異性。 </p>
<p><strong>例如：</strong> </p>
<blockquote>
<p><strong>body</strong> = 1分</p><p>
<strong>body .wrapper</strong> = 11分</p><p>
<strong>body .wrapper #container</strong> = 111分</p>
</blockquote>
<p>因此，使用這些分數，我期望以下的CSS和HTML會導致文字變為藍色：</p>
<p>
<pre class="brush:css;toolbar:false;">#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
<p>為什麼文字是紅色的，當15個類別等於150分，而1個ID等於100分？ </p>
<p>顯然，這些分數不僅僅是累積的；它們是連結在一起的。在這裡了解更多 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html </p>
<p>這是否意味著我們選擇器中的類別 = <code>0,0,15,0</code> 或 <code>0,1,5,0</code>？ </p>
<p>(我的直覺告訴我應該是前者，因為我們知道ID選擇器的特異性是這樣的：<code>0,1,0,0</code>)</p>
好問題。
我不能確定- 我找到的所有文章都避免了多個類別的範例，例如這裡 - 但我假設當涉及比較特定性在類別選擇器和ID之間時，類別只會被計算為一個值為
15的值，無論它有多詳細。這與我對特定性行為的經驗相符。
然而，必須有一些類別的堆疊，因為
比
更具體，我唯一的解釋是堆疊類別的特定性只針對彼此計算，而不針對ID計算。
更新：我現在有點明白了。這不是一個積分系統，關於類權重為15分的資訊是不正確的。這是一個非常好解釋的4部分編號系統，可以在這裡找到。
起始點是4個數字：
根據W3C關於特定性的解釋，上述規則的特定性值為：
這是一個具有非常大（未定義？）基數的編號系統。
我的理解是，由於基數非常大，第4列中的任何數字都無法擊敗第3列中大於0的數字，第2列也是如此，第1列也是如此.... 這個理解正確嗎？
我想知道是否有人對數學有更好的理解，能夠解釋這個編號系統以及如何在各個元素大於9時將其轉換為十進制。
Pekka的回答實際上是正確的，也可能是思考這個問題的最佳方式。
然而，正如許多人已經指出的那樣，W3C CSS推薦規範指出：「將三個數字a-b-c（在一個大基數的數字系統中）連接起來給出了特異性。」所以我內心的極客就必須弄清楚這個基數有多大。
結果發現，實作這個標準演算法的「非常大的基數」（至少由4個最常用的瀏覽器*）是256或28。
這表示用0個id和256個類別名稱指定的樣式將會覆寫只用1個id指定的樣式。我用一些fiddles進行了測試:
255個類別名稱不足以覆寫1個id
...但是256個類別名稱足以覆寫1個id
...且256個標籤名稱足以覆寫1個類別名稱
...但是，遺憾的是256個id不足以覆寫1個內聯樣式（更新於2012/8/15 -- 您將需要使用
!important）因此，實際上存在一個“點數系統”，但它不是基於10進制，而是基於256進制。以下是它的工作原理：
(28)2或65536，乘以選擇器中id的數量
這對於簡單的概念傳達來說並不是很實用。
這可能是為什麼關於這個主題的文章一直使用基於10進制的原因。
***** [Opera使用216（請參閱karlcow的評論）。其他一些選擇器引擎使用無窮大 - 實際上沒有點數系統（請參閱Simon Sapin的評論）。 ]
更新，2014年7月：
正如Blazemonger今年稍早指出的，webkit瀏覽器（Chrome，Safari）現在似乎使用比256更高的基數。也許是216，像Opera一樣？ IE和Firefox仍然使用256。
更新，2021年3月：
# Firefox不再使用256作為基數。