本篇大部分知识点源自Eric A.Mayer编著的《CSS权威指南》一书。
”层叠样式表“这个名字可能会提供一点提示。CSS所基于的方法就是让样式层叠在一起,这是通过结合继承和特殊性做到的。
CSS2.1的层叠规则相当简单:
- 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
- 按显示权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员、读者、和用户代理。正常情况下,创作人员的样式要胜过读者的样式。有!important标志的读者样式要强于所有其他样式,这包括有!important标志的创作人员样式。创作人员样式和读者样式都要比用户代理的默认样式要强。
- 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
- 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。
特殊性:
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,应从一开始就避免不加区别的使用通配选择器~
另另外,刚搜到一副图蛮有意思,可以一看~