深入理解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个月前)作者:commit-queue@webkit.org消息:

选择器特殊性类别溢出到高类别​https://bugs.webkit.org/show_bug.cgi?id=98295

Patch by Tab Atkins <​jackalmage@Gmail.com> on 2012-10-04Reviewed 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 bookCSS 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.

参考文章：