《CSS权威指南》学习记录——特殊性和层叠

继承（Inheritance）是从一个元素向其后代元素传递属性值时所采用的机制。确定向一个元素应用哪些样式时，不仅要考虑继承，还要考虑声明的特殊性，以及声明的来源，这个过程称为层叠（cascade）。

特殊性

经常会出现这样一种情况：同一个元素被应用不同的规则，当这些规则不冲突时还好，但是当发生冲突时，就要利用特殊性来解决。对于每个规则，用户代理会计算其特殊性，当一个元素有两个或多个冲突的规则时，拥有最高特殊性的规则会被应用。

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

1.对于选择器中给定的各个ID属性值，加0,1,0,0；
2. 对于选择器中给定的各个类属性值、属性选择和伪类，加0,0,1,0；
3.对于选择器中给定的各个元素或伪元素，加0,0,0,1；
4.结合符和通配选择器对于特殊性没有贡献，加0,0,0,0。

一大波例子即将来临：

<div style="backgroud:red"> /* 1,0,0,0 */#iin1{ backgroud:blue;} /* 0,1,0,0 */.iin2{ backgroud:green;} /* 0,0,1,0 */div#sidebar * [href]{color:#123;} /*0,1,1,1*/html>body table tr[id="totals"] td ul> li{color:#123;}/*0,0,1,7*/

注意，值是从左向右排序的。

ID选择器和属性选择器特殊性

观察上面最后一个例子和下面的例子：

li#answer{color:#123;}/*0,1,0,1*/

可见，ID选择器贡献0,1,0,0；而属性选择器贡献0,0,1,0。

内联样式特殊性

第一个0就是为内联样式保留的，它比其他任何声明的特殊性都高。
例如：

h1.para{color:green;}<h1 class="para" style="color:gray;">xxx</h1>

则h1的文本颜色将会是灰色。

重要声明

如果某个声明非常重要，可以在声明结束处，分号前加上

!important

例如：

p{color:#123 !important;font:italic !important;}

位置一定要放对，否则整个声明将无效。

实际上，用户代理会把重要声明放在一组，非重要声明放在一组，分别利用特殊性决定哪个规则胜出。当重要声明和非重要声明冲突时，胜利的总是重要声明。

继承

基于继承机制，样式不仅应用到指定的元素，而且还会应用到它的后代元素。
例如：

h1{color:green;}<h1>xxx<em>xxx</em></h1>

则不仅h1的文本颜色是绿色，其中的em元素的文本颜色也会是绿色。
传递的规则就是根据结构树形图一直传到底，而绝对不会向上传递。
有个例外，应用到body的背景样式可以传递到html，相应地可以定义其画布。

几点关于继承的注意事项

1.有些属性不能继承，比如border，原因是显而易见的。
2.继承的值没有特殊性。这和通配选择器的0特殊性不同，0特殊性比没有特殊性要强！
例如：

*{color:green;}h1#page-title{color:black;}<h1 id="page-title">xxx<em>xxx</em></h1>

则em部分是绿色，标题其余部分是黑色。

层叠

层叠规则

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

下面针对其中一部分具体说明：

按权重和来源排序

p{color:green !important;}<p style="color:yellow;">xxx<em>xxx</em><p>

则p元素的文本颜色为绿色，且其中的em元素的文本颜色也为绿色。

总结一下，声明权重方面要考虑5级。权重由大到小的顺序为：
1.读者的重要声明
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理声明

按特殊性排序

p{color:green;}p{color:yellow;}

当权重、来源和特殊性相同时，后出现的规则会获胜。因此，p的文本颜色为黄色。

根据层叠规则的第4条，认为元素style中指定的属性位于样式表最后。不过，这没有什么实际意义，因为内联样式声明的特殊性要高于所有样式表选择器。

在选择器的伪类那里，提到过一般的链接样式顺序（link-visited-hover-active LVHA），此时就可理解其原因了:如果用AHLV（假设都只有color声明）的顺序的话，则只会显示未访问和访问过两种样式，因为由于冲突激活和悬浮的样式都被覆盖了。

再考虑下面一种常用的情况：只有未访问过的链接有悬浮样式，访问过的
链接没有悬浮样式，但两者都有激活样式，则顺序应为LHVA。

通常将伪类连接起来，可以缓解特殊性和顺序带来的问题。例如：

:link{color:#123};:visited{color:#234;}:link:hover{color:#345;}:visited:hover{color:#456;}

因为每个规则对应唯一的连接状态，所以不会产生冲突，即使改变顺序也不会影响文档样式。

非CSS表现提示

如果文档中包含非CSS的表现提示，则视其特殊性为0，并出现在创作人员样式表的最前面。只要有创作人员或读者样式，这种表现提示就会被覆盖，但是用户代理的样式不能将其覆盖。