{{CSS}}结构和层叠

每个合法的文档都会生成一个文档树，从而能根据元素的祖先，属性，兄弟元素等创建选择器来选择元素。有了这个结构树，选择器才能起作用，这也是CSS继承的核心。继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源，这个过程称为层叠。

1.特殊性
每个选择器都有特殊性，对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。若一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明将胜出。
选择器的特殊性由选择器本身的组件确定。特殊性表述分为４个部分，如0,0,0,0。一个选择器的具体特殊性如下确定：
１）对于选择器给定的各个ID属性值，加0,1,0,0
２）对于选择器给定的各个类属性值，属性选择或伪类，加0,0,1,0
３）对于选择器给定的各个元素和伪元素，加0,0,0,1
４）结合符和通配选择器对特殊性没有任何贡献。其特殊性为0,0,0,0，但这与根本没有特殊性（继承没有特殊性）有本质区别。
５）一般地，第一个０是为内联样式表声明保留的，它比所有其他声明的特殊性都高。其特殊性为1,0,0,0。（为内联样式表声明保留一位是CSS2.1才加上的）

2.重要性
有时某个声明可能很重要，超过了所有其他声明，CSS2.1称之为重要声明，并允许在这些声明的结束分号之前插入!important来标志。
标志为!important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。实际上，所有!important声明会分组在一起，重要声明的特殊性冲突会在重要声明内部解决，而不会与非重要声明相混。类似地，我们认为所有非重要声明也归为一组，使用特殊性来解决冲突。若一个重要声明和一个非重要声明冲突，胜出的总是重要声明。

3.继承
基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。继承是CSS中最基本的内容，除非有必须，否则一般不会特别考虑。不过需要注意以下几点：
１）注意有些属性不能被继承，这往往归因于一个简单的常识。一般地，大多数框模型属性（包括外边距，内边距，背景和边框）都不能被继承。
２）继承的值根本没有特殊性，甚至连0特殊性都没有。如下：
*{color:gray;}
h1#page-title{color:black;}

<h1 id="page-title">Meetkat <em>CEntral</em><h1>
<p>Welcome to the best place on the web</p>

因为通配选择器适用于所有元素，而且有０特殊性，其颜色声明指定的值gray要优先于继承值（black），因为继承值根本没有特殊性。故em元素会显示为灰色而不是黑色。

4.层叠
CSS所基于的方法是让样式层叠在一起，这是通过继承和特殊性做到的，CSS2.1的层叠规则如下：
１）找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器
２）按显式权重对应用到给定元素的所有声明排序。标志!important的规则的权重高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有３种来源：创作人员，读者，用户代理。正常情况下，创作人员的样式要胜于读者的样式表，有!important标志的读者样式要强于所有其他样式，这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
３）按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重重要大于较低特殊性的元素。
４）按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中有导入样式表的话，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

接下来对２）３）４）详细说明：
２）按权重和来源排序
若两个样式规则应用到同一个元素，而且其中一个规则有!important标志，这个重要规则将胜出。在声明权重方面要考虑５级，权重由大到小的顺序依次为：
1.读者的重要声明
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理声明

３）按特殊性排序若
若向一个元素应用多个彼此冲突的声明，而且它们的权重相同，则要按特殊性排序，最特殊的声明最优先。

４）按顺序排序
若两个规则的权重，来源和特殊性完全相同，那么在样式表中后出现的一个会胜出。特别地，认为元素style属性中指定我样式位于文档样式表的最后，即放在所有其他规则的后面。不过，这一点已经没有意义了，因为CSS2.1明确指明内联样式的特殊性要高于所有样式表选择器。
正是由于这种按顺序排序，所以才有了通常推荐的链接样式顺序：link-visited-hover-active（LVHA）。
:link{color:blue;}
:visited{color:purple;}
:hover{color:red;}
:active{color:orange;}
这四个选择器的特殊性都是一样的：0,0,1,0。因为它们有相同的权重，来源，特殊性，故与元素匹配的最后一个选择器才会胜出。
正在“点击”的未访问链接可以与其中３个规则匹配——:link,:hover,:active——所以在这三个规则当中最后声明的一个胜出。若按照LVHA顺序，:active将会胜出，这也正是所期望的。

5.非CSS表现提示
文档有可能包含非CSS的表现提示，例如font元素。非CSS提示被处理为特殊性为０，并出现在创作人员样式表的最前面。只要有创作人员或读者样式，这种表现提示就会被覆盖，但用户代理的样式不能将其覆盖。