技巧篇---css选择器权重计算

css选择器的优先级

！import >行内样式>id选择器>class选择器>标签选择器>通配选择器>

如何正确理解优先级关系

共分为4个等级在简单的按照比例关系能够处理常用的选择权重问题：

第一等：代表内联样式，如: style="xxx"，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10。
第四等：代表元素选择器和伪元素选择器，如div，p，权值为1。

如何正确解释权重

如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)（HTML元素的style属性也是样式规则，因为这些样式规则没有选择器，因此记为a=1,b=0,c=0,d=0）
计算选择器中 ID 属性的个数 (= b)
计算选择器中其他属性(类、属性选择器)和伪类的个数 (= c)
计算选择器中元素名称和伪元素的个数 (= d)

将四个数字按 a-b-c-d 这样连接起来（位于大数进制的数字系统中），构成选择器的优先级。

在最新的Selector Level 3规范中：

计算选择器中 ID 属性的个数 (= a)
计算选择器中其他属性(类、属性选择器)和伪类的个数 (= b)
计算选择器中元素名称和伪元素的个数 (= c)
忽略通用选择器*

将三个数字按 a-b-c这样连接起来（位于大数进制的数字系统中），构成选择器的优先级。style属性计算参考css2.1规范。

问题：
1、选择器的整体优先级如何计算，是像网上说的a1000+b100+c*10+d吗？
答：不是。这种回答明显是望文生义。四级（a、b、c、d）之间并不是简单的相加关系。同一级（例如：a对a）的才具有可比关系。

分析：
以下为webkit的webCore中关于优先级计算的代码（http://trac.webkit.org/browser/trunk/Source/WebCore/css/CSSSelector.cpp）
复制代码

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（伪类、类）选择器的最大值，十进制表示：(1616+16)16^2=65280
static const unsigned elementMask = 0xff; // 元素选择器的最大值，十进制表示：1616+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;

结论：

1、优先级计算时跨级相加应注意溢出问题；

2、优先级计算不包括inline style和!important（最高优先，权重无穷大）；

3、优先级计算只有同一类别才具有可比性（一般也不会有人定义超出255个的同一选择器）。