关于CSS规则的优先性【CSS层叠规则】

本篇大部分知识点源自Eric A.Mayer编著的《CSS权威指南》一书。

”层叠样式表“这个名字可能会提供一点提示。CSS所基于的方法就是让样式层叠在一起，这是通过结合继承和特殊性做到的。

CSS2.1的层叠规则相当简单：

1. 找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
2. 按显示权重对应用到该元素的所有声明排序。标志！important的规则的权重要高于没有！important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源：创作人员、读者、和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有！important标志的读者样式要强于所有其他样式，这包括有！important标志的创作人员样式。创作人员样式和读者样式都要比用户代理的默认样式要强。
3. 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

特殊性：

CSS2.1中规定特殊性表述为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。）
• 结合符和通配选择器对特殊性没有任何贡献。

例子：

div ul ul li           /* 0,0,0,4    4个元素选择器 */div.aside ul li        /* 0,0,1,3    1个类选择器，3个元素选择器 */a:hover                /* 0,0,1,1    1个伪类选择器，1个元素选择器 */div.navlinks a:hover   /* 0,0,2,2    1个类选择器，1个伪类选择器，2个元素选择器 */#title em              /* 0,1,0,1    1个 ID 选择器，1个元素选择器 */h1#title em            /* 0,1,0,2    1个 ID 选择器，2个元素选择器 */*                      /* 0,0,0,0    1个通用选择器 */

一般的，特殊性四部分中的第一项0其实是为内联样式声明保留的。每个内联声明的特殊性都是1,0,0,0。

另外，0特殊性比无特殊性要强：

*{color: gray;}h1#page-title {color: black;}<h1 id="page-title">Meerkat <em>Central</em></h1>

之前讲到通配选择器有0特殊性，并且适用于所有元素，又由于继承值根本没有特殊性，因此，em元素会显示为灰色而不是黑色。

SO，应从一开始就避免不加区别的使用通配选择器~

另另外，刚搜到一副图蛮有意思，可以一看~