深入理解CSS選擇器優先順序的計算

選擇器的優先順序關係到元素應用哪個樣式。在CSS2.1的規範（http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity）中是這樣描述的：

1. 如果聲明來自於“style”屬性，而不是帶有選擇器的規則，則記為 1，否則記為 0 (= a)（HTML元素的style屬性也是樣式規則，因為這些樣式規則沒有選擇器，因此記為a=1,b=0,c=0,d=0）
2. 計算選擇器中 ID 屬性的個數 (= b)
3. 計算選擇器中其他屬性(類、屬性選擇器)和偽類的個數 (= c)
4. 計算選擇器中元素名稱和偽元素的個數 (= d)

將四個數字按 a-b-c-d 這樣連接起來（位於大數進位的數字系統中），構成選擇器的優先順序。

在最新的Selector Level 3規範中： 

1. 計算選擇器中 ID 屬性的個數 (= a)
2. 計算選擇器中其他屬性(類、屬性選擇器)和偽類的個數 (= b)
3. 計算選擇器中元素名稱和偽元素的個數 (= c)
4. 忽略通用選擇器*

問題：

1、選擇器的整體優先順序如何計算，是像網上說的a*1000+b*100+c*10+d嗎？

unsigned CSSSelector::specificity() const
{
    // make sure the result doesn't overflow
    static const unsigned maxValueMask = 0xffffff; // 整個選擇器的最大值，十進位表示：idMask + classMask + elementMak = 16777215
    static const unsigned idMask = 0xff0000; // ID選擇器的最大值，十進位表示：(16*16+16)*16^4=16711680
    static const unsigned classMask = 0xff00; // class（偽類、類）選擇器的最大值，十進位表示：(16*16+16)*16^2=65280
    static const unsigned elementMask = 0xff; // 元素選擇器的最大值，十進位表示：16*16+16=255

    if (isForPage())
        return specificityForPage() & maxValueMask;

    unsigned total = 0;
    unsigned temp = 0;

    for (const CSSSelector* selector = this; selector; selector = selector->tagHistory()) {
        temp = total + selector->specificityForOneSelector();
        // Clamp each component to its max in the case of overflow.
        if ((temp & idMask) < (total & idMask)) // 判斷是否為ID選擇器
            total |= idMask; // 保證ID選擇器的同類疊加不會超過ID選擇器的總最大值，下同
        else if ((temp & classMask) < (total & classMask))
            total |= classMask;
        else if ((temp & elementMask) < (total & elementMask))
            total |= elementMask;
        else
            total = temp;
    }
    return total;
}

inline unsigned CSSSelector::specificityForOneSelector() const
{
    // FIXME: Pseudo-elements and pseudo-classes do not have the same specificity. This function
    // isn't quite correct.
    switch (m_match) {
    case Id:
        return 0x10000; // ID選擇器權重

    case PseudoClass:
        // FIXME: PsuedoAny should base the specificity on the sub-selectors.
        // See http://lists.w3.org/Archives/Public/www-style/2010Sep/0530.html
        if (pseudoClassType() == PseudoClassNot && selectorList())
            return selectorList()->first()->specificityForOneSelector();
        FALLTHROUGH;
    case Exact:
    case Class:
    case Set:
    case List:
    case Hyphen:
    case PseudoElement:
    case Contain:
    case Begin:
    case End:
        return 0x100; // class選擇器權重

    case Tag:
        return (tagQName().localName() != starAtom) ? 1 : 0; // 元素選擇器權重
    case Unknown:
        return 0;
    }
    ASSERT_NOT_REACHED();
    return 0;
}

時間戳:2012-10-04 19:04:44 (20個月前)作者:[email protected]消息:

選擇器特殊性類別溢出到高類別
​https://bugs.webkit.org/show_bug.cgi?id=98295

Patch by Tab Atkins <​[email protected]> on 2012-10-04
Reviewed by Eric Seidel.

這一次添加的補丁是為了對於CSS選擇器的特殊性添加溢出策略。

以前我們並不會檢測每個類別的特殊性溢出問題。原始的策略是：把每個類別存儲為一個位元組（2^8=256），然後整體存在一個無符號整型數中。這樣的話就會導致256個同一類別的單選擇器等於1個高類別的選擇器。但是這違反了選擇器的特殊性規則，導致樣式規則排序問題。

Tests: /fast/selectors/specificity-overflow.html

• css/CSSSelector.cpp:

(WebCore::CSSSelector::specificity):

int32_t nsCSSSelector::CalcWeightWithoutNegations() const
 {
   int32_t weight = 0;
 
 #ifdef MOZ_XUL
   MOZ_ASSERT(!(IsPseudoElement() &&
                PseudoType() != nsCSSPseudoElements::ePseudo_XULTree &&
                mClassList),
              "If non-XUL-tree pseudo-elements can have class selectors "
              "after them, specificity calculation must be updated");
 #else
   MOZ_ASSERT(!(IsPseudoElement() && mClassList),
              "If pseudo-elements can have class selectors "
              "after them, specificity calculation must be updated");
 #endif
   MOZ_ASSERT(!(IsPseudoElement() && (mIDList || mAttrList)),
              "If pseudo-elements can have id or attribute selectors "
              "after them, specificity calculation must be updated");
 
   if (nullptr != mCasedTag) {
     weight += 0x000001;
   }
   nsAtomList* list = mIDList;
   while (nullptr != list) {
     weight += 0x010000;
     list = list->mNext;
   }
   list = mClassList;
 #ifdef MOZ_XUL
   // XUL tree pseudo-elements abuse mClassList to store some private
   // data; ignore that.
   if (PseudoType() == nsCSSPseudoElements::ePseudo_XULTree) {
     list = nullptr;
   }
 #endif
   while (nullptr != list) {
     weight += 0x000100;
     list = list->mNext;
   }
   // FIXME (bug 561154):  This is incorrect for :-moz-any(), which isn't
   // really a pseudo-class.  In order to handle :-moz-any() correctly,
   // we need to compute specificity after we match, based on which
   // option we matched with (and thus also need to try the
   // highest-specificity options first).
   nsPseudoClassList *plist = mPseudoClassList;
   while (nullptr != plist) {
     weight += 0x000100;
     plist = plist->mNext;
   }
   nsAttrSelector* attr = mAttrList;
   while (nullptr != attr) {
     weight += 0x000100;
     attr = attr->mNext;
   }
   return weight;
 }
 
 int32_t nsCSSSelector::CalcWeight() const
 {
   // Loop over this selector and all its negations.
   int32_t weight = 0;
   for (const nsCSSSelector *n = this; n; n = n->mNegations) {
     weight += n->CalcWeightWithoutNegations();
   }
   return weight;
 }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
*{font-size:40px;}
#test {font-size:12px !important;}
p {font-size:24px;}
</style>
<body>
<div id="test"><p>test text</p></div>
</body>

在所有瀏覽器中文字都會應用p {font-size:24px;}。如果把這句去掉的話，就會應用*{font-size:40px;}，*包括p。（繼承的樣式沒有優先順序）

結論：

1、優先順序計算時跨級相加應註意溢出問題；

2、優先順序計算不包括inline style和!important；

3、優先順序計算只有同一類別才具有可比性（一般也不會有人定義超出255個的同一選擇器）。

I am currently using the book CSS Mastery: Advanced Web Standards Solutions.

Chapter 1, page 16 says:

To calculate how specific a rule is, each type of selector is assigned a numeric value. The specificity of a rule is then calculated by adding up the value of each of its selectors. Unfortunately, specificity is not calculated in base 10 but a high, unspecified, base number. This is to ensure that a highly specific selector, such as an ID selector, is never overridden by lots of less specific selectors, such as type selectors.

參考文章：