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

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

    选择器的特异性

    选择器的特异性由 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. [PHP程序设计] PHP中的Hash算法 3 个条目
  2. [计算机算法] TAOCP与算法 12 个条目
  3. [PHP程序设计] htaccess 设置技巧 6 个条目
  4. [JavaScript程序设计] jQuery与表单操作 2 个条目
  5. [运维管理] 防火墙原理与应用 5 个条目
  6. [运维管理] 路由器与交换机 4 个条目
  7. [数据库技术] MySQL常用自带函数 3 个条目
  8. [移动开发] Android加载器Loaders 5 个条目
  9. [数据结构] 散列表(哈希表) 13 个条目
  10. [计算机算法] 从双端队列引出的卡特兰数 3 个条目
  11. [Python程序设计] Django Web环境配置 2 个条目
  12. [Linux操作系统] 基本 Linux Shell 命令 2 个条目
窗口 -- [博客]