目前，本章一直回避了一个十分重要的问题：如果两个特指度相等的规则应用到同一个元素上会发生什么？浏览器如何解决这样的冲突呢？
“层叠样式表”这个名称可以提供一点线索： CSS采用层叠机制把样式组合在一起，即结合继承和特指度的一些规则。CSS的层叠规则如下：
- 找到匹配特定元素的所有规则。
- 按显式权重排序应用到特定元素上的所有声明。以!Important标记的规则比没有这一标记的权重高。
- 按来源排序应用到特定元素上的所有声明。声明有三个来源：创作人员、读者和用户代理。正常情况下，创作人员编写的样式击败读者提供的样式；读者样式中以!Important标记的声明比其他样式权重高，包括创作人员编写的样式中以!important标记的声明；创作人员和读者样式覆盖用户代理的默认样式。
- 按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的权重。
- 按声明的前后位置排序应用到特定元素上的所有声明。样式表或文档中靠后的声明权重较高。导入的样式表中的声明放在当前样式表中所有声明的前面。
3.3.1按权重和来源排序
如果两个规则应用到同一个元素上，而其中一个以!important标记，那么有此标记的规则胜出：
p {color: gray !important;}
<p style=”color: black;”>Well, <em>hello</em> there!</p>
虽然有个颜色由段落的style属性提供，但是!important标记的规则依然胜出，因此段落将显示为灰色。em元素会继承灰色。
注意，如果!important在行内样式中，那么行内样式将胜出。因此 对下属规则和标记来说，段落（及其后代元素）将显示为黑色：
p {color: gray !important;}
<p style=”color: black !important;”>Well, <em>hello</em> there!</p>
如果显式权重相同，就要考虑规则的来源。如果匹配元素的两个样式权重相同，而一个．在创作人员编写的样式表中，另一个在读者提供的样式表中，那么元素将使用创作人员编写的样式表中的样式。例如，假设下面两个样式分别来自指定的位置：
p em {color: black;} /* author’s style sheet */
p em {color: yellow;} /* reader’s style sheet */
此时，段落中的强调文本将显示为黑色，而不是黄色，因为同样的权重下，创作人员编写的样式战胜读者提供的样式。然而，如果两个规则都用!important标记，那情况就变了：
p em {color: black !important;} /* author’s style sheet */
p em {color: yellow !important;} /* reader’s style sheet */
现在，段落中的强调文本将显示为黄色，而不是黑色。
有时，这里还牵涉到用户代理的默认样式（通常受用户偏好设置的影响）。在所有来源中，默认样式中的声明是影响力最低的。因此，如果创作人员为锚记定义了规则（例如声明颜色为white），那么用户代理默认的样式将被覆盖。
综上，在声明的权重上，基本要考虑五个方面。下面按权重从高到低列出：
- 读者提供的样式中以!important标记的声明。
- 创作人员编写的样式中以!important标记的声明。
- 创作人员编写的常规声明。
- 读者提供的常规声明。
- 用户代理的默认声明。
3.3.2按特指度排序
如果应用到一个元素上的声明有冲突，而且各声明的显式权重和来源相同，那么应该按特指度排序，特指度最高的声明胜出。例如：
p#bright {color: silver;}
p {color: black;}
<p id=”bright”>Well, hello there!</p>
对上面的规则来说，段落中的文本将显示为银色，如图3-8所示。
图3-8:特指度较高的声明胜出
3.3.3按前后位置排序
最后，如果两个规则的显式权重、来源和特指度都相同，那么在样式表中的位置靠后的规则胜出。
h1 {color: red;}
h1 {color: blue;}
此时，文档中所有h1元素的color值将取blue，而不是red。
那么，如果来自不同样式表的规则有冲突了呢？例如，对下面的样式表来说：
@import url(basic.css);
h1 {color: blue;}
如果h1{color : red;}在basic.css中，情况如何？basic.css中的全部内容相当于出现于@import所在的位置。因此，当前样式表中的规则出现在@import导入的样式之后。如果显式权重和特指度相同，当前样式表中的声明胜出。来看下面的规则：
p em {color: purple;} /* from imported style sheet */
p em {color: gray;} /* rule contained within the document */
此时，第二个规则胜出，因为它是后声明的那个。
就是因为前后位置有影响，所以通常才推荐按照一定的顺序编写链接的样式。链接样式的推荐顺序是“link-visited-focus-hover-active”（LVFHA），如下所示：
a:link {color: blue;}
a:visited {color: purple;}
a:focus {color: green;}
a:hover {color: red;}
a:active {color: orange;}
假设我们忽略推荐的顺序，按照字母顺序排列链接样式的各个伪类，写成这样：
a:active {color: orange;}
a:focus {color: green;}
a:hover {color: red;}
a:link {color: blue;}
a:visited {color: purple;}
此时，任何链接都不会匹配:hover、:focus或:active样式，因为:link和:visited规则在它们三个后面。链接要么已访问，要么未访问，因此:link和:visited总是会把其他的规则覆盖掉。
再来看一个创作人员可能会使用的顺序。此时，只有未访问的链接有悬停样式，已访问的链接没有。不过，已访问和未访问的链接都有激活样式：
a:link {color: blue;}
a:hover {color: red;}
a:visited {color: purple;}
a:focus {color: green;}
a:active {color: orange;}
这种冲突只发生在所有状态都设定相同的属性之时。如果不同的状态设定不同的属性，那么前后位置就没关系了。对下面的情况来说，链接样式可以写为任何顺序，不管怎么写都能起作用：
a:link {font-weight: bold;}
a:visited {font-style: italic;}
a:focus {color: green;}
a:hover {color: red;}
a:active {background: yellow;}
你可能还发现了，:link和:visited样式的顺序没关系。写成LVFHA或VLFHA都可以。
把伪类串在一起可以消除这一系列问题。下面几个规则可以写成任何顺序，不会出现谁覆盖谁的情况：
a:link {color: blue;}
a:visited {color: purple;}
a:link:hover {color: red;}
a:visited:hover {color: gray;}
这几个规则分别应用于链接的不同状态，因此相互之间不冲突。
如果加上激活状态，顺序就又变重要了。对下面的规则来说：
a:link {color: blue;}
a:visited {color: purple;}
a:link:hover {color: red;}
a:visited:hover {color: gray;}
a:link:active {color: orange;}
a:visited:active {color: silver;}
如果把激活状态的样式移到悬停状态的样式前面，二者都将被忽略。这里的原因是特指度有冲突。解决的方法是增加串联的伪类数量，如下所示：
a:link:hover:active {color: orange;}
a:visited:hover:active {color: silver;}
这样做增加了选择符的特指度（都变成了0,0,3,1），但是它们不再冲突了，因为选择状态是互斥的。
3.3.4 CSS之外的表现提示
文档除了CSS之外可能包含表现提示（presentational hint），例如font元素。这种表现提示的特指度为0，而且认为出现在创作人员编写的样式表的开头。表现提示将被创作人员编写的样式或读者提供的样式覆盖，但是不会被用户代理的默认样式覆盖。CSS3把CSS外部的表现提示视作用户代理默认样式表的一部分，而且假定出现在默认样式表的最后。
转载请注明：陈童的博客 » CSS权威指南（第四版）读书笔记——第3章 特指度和层叠之层叠
