• 选择器的特异性与规则排序

    计算CSS规则权重的问题
    服务器君一共花费 16.512 ms 进行了 4 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    选择器的特异性

    选择器的特异性由 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)均已加载完毕。如果在附加过程中尚未完全加载样式,则使用占位符,并在文档中进行标注,等样式表加载完毕后再重新计算。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [数据结构] 图的定义 1 个条目
  2. [Python程序设计] Django模板系统 11 个条目
  3. [C语言程序设计] 结构体基本知识 1 个条目
  4. [移动开发] Content Provider内容提供者 3 个条目
  5. [移动开发] 简单了解Android Fragment 3 个条目
  6. [计算机算法] 两数交换的各种算法细节 2 个条目
  7. [移动开发] Android View注入框架Butter Knife 3 个条目
  8. [移动开发] 从代码角度去认识 Handler 4 个条目
  9. [Python程序设计] 从PHP到Python 3 个条目
  10. [智力开发与知识管理] 整体性学习策略 9 个条目
  11. [数据库技术] MySQL中英文混合排序 4 个条目
  12. [移动开发] Activity 初步知识 2 个条目
窗口 -- [资讯]