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个的同一选择器)。