css选择器权重排序_选择器的特异性与规则排序

选择器的特异性

选择器的特异性由 CSS2 规范定义如下：

如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)

记为选择器中 ID 属性的个数 (= b)

记为选择器中其他属性和伪类的个数 (= c)

记为选择器中元素名称和伪元素的个数 (= d)

将四个数字按 a-b-c-d 这样连接起来(位于大数进制的数字系统中)，构成特异性。

使用的进制取决于上述类别中的最高计数。

例如，如果 a=14，您可以使用十六进制。如果 a=17，那么您需要使用十七进制；当然不太可能出现这种情况，除非是存在如下的选择器：html body div div p ...(在选择器中出现了 17 个标记，这样的可能性极低)。

一些示例：

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

规则排序

找到匹配的规则之后，应根据级联顺序将其排序。Webkit 对于较小的列表会使用冒泡排序，而对较大的列表则使用归并排序。对于以下规则，Webkit 通过替换“>”运算符来实现排序：

static bool operator >(CSSRuleData& r1, CSSRuleData& r2)

{

int spec1 = r1.selector()->specificity();

int spec2 = r2.selector()->specificity();

return (spec1 == spec2) : r1.position() > r2.position() : spec1 > spec2;

}

渐进式处理

Webkit 使用一个标记来表示是否所有的顶级样式表(包括 @imports)均已加载完毕。如果在附加过程中尚未完全加载样式，则使用占位符，并在文档中进行标注，等样式表加载完毕后再重新计算。