搜尋

首頁  >  問答  >  主體

CSS特異性的計算方法是什麼?

<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>
P粉823268006P粉823268006448 天前668

全部回覆(2)我來回復

  • P粉523335026

    P粉5233350262023-08-24 00:41:41

    好問題。

    我不能確定- 我找到的所有文章都避免了多個類別的範例,例如這裡 - 但我假設當涉及比較特定性在類別選擇器和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時將其轉換為十進制。

    回覆
    0
  • P粉920835423

    P粉9208354232023-08-24 00:06:43

    Pekka的回答實際上是正確的,也可能是思考這個問題的最佳方式。

    然而,正如許多人已經指出的那樣,W3C CSS推薦規範指出:「將三個數字a-b-c(在一個大基數的數字系統中)連接起來給出了特異性。」所以我內心的極客就必須弄清楚這個基數有多大。

    結果發現,實作這個標準演算法的「非常大的基數」(至少由4個最常用的瀏覽器*)是256或28

    這表示用0個id和256個類別名稱指定的樣式將會覆寫只用1個id指定的樣式。我用一些fiddles進行了測試:

    因此,實際上存在一個“點數系統”,但它不是基於10進制,而是基於256進制。以下是它的工作原理:

    (28)2或65536,乘以選擇器中id的數量

    • (28)1或256,乘以選擇器中類別名稱的數量
    • (28)0或1,乘以選擇器中標籤名的數量

    這對於簡單的概念傳達來說並不是很實用。
    這可能是為什麼關於這個主題的文章一直使用基於10進制的原因。

    ***** [Opera使用216(請參閱karlcow的評論)。其他一些選擇器引擎使用無窮大 - 實際上沒有點數系統(請參閱Simon Sapin的評論)。 ]

    更新,2014年7月:
    正如Blazemonger今年稍早指出的,webkit瀏覽器(Chrome,Safari)現在似乎使用比256更高的基數。也許是216,像Opera一樣? IE和Firefox仍然使用256。

    更新,2021年3月:
    # Firefox不再使用256作為基數。

    回覆
    0
  • 取消回覆