CSS样式的特殊性

特殊性、继承、层叠

• 特殊性

  同一个元素可以通过多种方式选取到，不同的选取方式会应用不同的样式规则。那么当应用的样式规则存在冲突的时候，肯定需要评出一个优先级最高的规则来应用（毕竟一种元素最终只能呈现一种规则的样式）。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明，最后拥有最高特殊性的声明会在冲突中胜出。

  特殊性值表述为4个部分，如：0，0，0，0。一个选择器的具体特殊性如下确定：

  • 对于选择器中给定的各个ID属性值，加0，1，0，0。
  • 对于选择器中给定的各个类属性值、属性选择或伪类，加0，0，1，0。
  • 对于选择其中给定的各个元素和伪元素，加0，0，0，1。伪元素是否有特殊性？在这个方面CSS2有些自相矛盾，不过CSS2.1很清楚地指出，伪元素有特殊性，而且特殊性为0，0，0，1。

  • 结合符和通配选择器对特殊性没有任何贡献

    示例：

    h1 { color: red; }   /* 0,0,0,1 */
    body h1 { color: green; }   /* 0,0,0,2 (winner) */
    
    h2.grape { color: purple; }   /* 0,0,1,1 (winner) */
    h2 { color: silver; }   /* 0,0,0,1 */

    针对比较复杂点的规则，比如：

    h1 { color: silver; background: black; }

    由于特殊性的缘故，用户代理必须相应的处理这个规则，将其”解组”为单独的规则。然后针对单独的规则进行特殊性值的比较。
    因此，前面的例子将变成：

    h1 { color: silver; }
    h1 { background: black; }

    通配选择器对一个选择器的特殊性没有贡献。并不是说它没有特殊性，而是因为她的特殊性为0，0，0，0。这就意味着如果一个选择器中包含通配选择器和其他选择器，该选择器的特殊性不会因通配选择器的出现而改变。下面两个选择器的特殊性完全相同：

    div p {}  /* 0,0,0,2 */
    body * strong /* 0,0,0,2 */

    相比之下，结合符则根本没有特殊性，甚至连0特殊性都没有。因此，它们对选择器的总特殊性没有任何影响。

    ID选择器和指定ID属性的属性选择器在特殊性上有所不同。

    html > body table tr[id="totals"] td ul > li { color: maroon; }  /* 0,0,1,7 */
    li#answer {  color: navy; }   /* 0,1,0,1 (winner) */

    上面的例子中，第二个规则中的ID选择器（#answer）为选择器的总特殊性贡献了0,1,0,0。而在第一个规则中，属性选择器（[id = ‘totals’]）只对总特殊性贡献了0，0，1，0。因此，给定以下规则，id 为meadow的元素将变成绿色：

    #meadow { color: green; }  /* 0,1,0,0 */
    *[id="meadow"] {color: red;}   /* 0,0,1,0 */

    上面所涉及到的元素的特殊性都是以0开头的特殊性，我们可能会好奇为什么会有这些特殊性，第一个非0的情况会是因为什么。

    一般的，第一个0是为内联样式声明保留的，内联样式比其他声明的特殊性都高。

    h1 { color: red: }  /* 0,0,0,1 */
    <h1 style="color: green">the meadow party</h1>  /* 1,0,0,0 */

    上面这个规则应用到h1元素，根据特殊性的计算方式h1的文本还将是绿色。

    重要声明，某个声明非常重要，我们可以在这些声明的结束分号之前插入 !important来标识。重要声明的优先级比任何一个非重要性声明的特殊性要高。

• 继承

• 层叠

以上有关样式的知识来自于CSS权威指南(第三版)

赏

谢谢你请我吃糖果