CSS：结构和层叠

特殊性

特殊性（specificity）：对于每个规则，用户代理会计算选择器的特殊性并将特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明，有最高特殊性的声明就会胜出。

选择器的特殊性由选择器本身组件确定，特殊性值表述为4个部分。特殊性排序从左向右，特殊性值为1,0,0,0大于以0开头的所有特殊性值，不论后面的数是什么，以此类推。

对于选择其中给定的各个ID属性值+(0,1,0,0)

对于选择器中给定的各个类的属性值、属性选择或伪类+(0,0,1,0)

对于选择器中给定的各个元素和伪元素+(0,0,0,1)

结合符（无特殊性）和通配选择器（0特殊性 i.e. 0, 0, 0, 0）对特殊性没有贡献。（0特殊性>无特殊性）

e.g.

h1 {color: red;} /*0, 0, 0, 1 */
p em {color: purple;} /* 0, 0, 0, 2 */
.grape {color: purple;} /* 0, 0, 1, 0 */
*.bright {color: yellow;} /* 0, 0, 1, 0 */
p.bright em.dark {color: maroon;} /* 0, 0, 2, 2 */
#id216 {color: blue;} /* 0, 1, 0, 0 */
div#sidebar*[href] {color:silver;} /* 0, 1, 1, 1 */

注意：ID选择器和指定id属性的属性选择器不同。

e.g. ID选择器(#answer +0, 1, 0, 0)，属性选择器([id=”totals”] +0, 0, 1,0)。

最高位为0是为内联样式声明保留的，每个内联声明的特殊性都是1,0,0,0，比所有其他声明的特殊性要高。

E.g.

<h1 style=”color:green;”>

 

重要性

重要声明：有时某个声明可能非常重要，超过了所有其他声明，在这些重要声明最后结束分号之前插入!important来标志。如果没有放在声明最后（i.e.分号前面），则整个声明都将无效。

e.g.

p.dark {color:#333 !important; background:white;}

如果需要将多个声明都标志为重要，需要为每个声明添加自己的!important标识。

e.g.

p.dark {color: #333 !important; background: white !important;}

所有标识!important的声明会分组在一起，其特殊性冲突会在重要声明内部解决，不会与非重要声明混合。如果一个重要声明和一个非重要声明冲突，胜出的总是重要声明。

 

继承

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

大多数框模型属性（外边距、内边距、背景和边框）都不能继承。

继承值根本没有特殊性，即低于0特殊性的通配符。所以，通配选择器往往有一种短路继承的效果，应避免不加区别地使用通配选择器。

 

层叠

CSS2.1层叠规则

1. 找出所有相关规则，这些规则都包含与一个给定元素匹配的选择器。

2. 按显式权重对应用到该元素的所有声明排序

           标志!important>未标志!important

           正常情况下创作人员样式>读者样式

           有!important标识的读者样式>所有其他样式（包括有!important标识的创作人员样式）

           创作人员样式或读者样式>用户代理默认样式

权重排序：读者重要声明>创作人员重要声明>创作人员正常声明>读者正常声明>用户代理声明

3. 按特殊性对应用到给定元素的所有声明排序，较高特殊性>较低特殊性

4. （如果特殊性相等）按出现顺序对应用到给定元素的所有声明排序，声明在样式表或文档中越后出现权重越大。（一般认为导入样式表中声明在前，主样式表中声明在后）。

因此可得出推荐采用link-visited-hover-active (LVHA) 顺序声明的原因。

 

非CSS表现提示的特殊性为0，可被创作人员或读者样式覆盖。