CSS权威指南（3）

特指度和层叠

---

一、特指度

选择符的特指度由选择符本省的组成部分决定。一个特指度由四个部分构成，例如0，0，0，0。特指度值从左向右比较 。
选择符的特指度规则：

• 选择符中的每个ID属性值 加0，1，0，0
• 选择符中的每个类属性值 、属性选择 或伪类 加0，0，1，0
• 选择符中的每个元素 和伪元素 加0，0，0，1
• 连结符 和通用选择符 不增加特指度

代码如下（示例）：

h1{color:red;}//0,0,0,1
body h1{color:green;}//0,0,0,2（胜出）

h2.grape{color:purple;}//0,0,1,1（胜出）
h2{color:silver;}//0,0,0,1

html>body table tr[id="totals"] td ul>li{color:maroon;}//0,0,1,7
li#answer{color:navy;}//0,1,0,1（胜出）
）

1.声明和特指度

在任何情况下，用户代理都会确定哪些规则与元素匹配，然后找出所有相关的声明，计算各自的特指度，判断哪些规则胜出，再把胜出的规则应用到元素上。

2.通用选择符的特指度

通用选择符不增加特指度 ，它的特指度为0，0，0，0。连接符没有特指度 ，即连零都没有。

3.ID和属性选择符的特指度

ID选择符和选择id属性的属性选择符之间在特指度上是有区别的。
代码如下（示例）：

html>body table tr[id="totals"] td ul>li{color:maroon;}//id="totals"为属性选择符，特指度为0，0，1，0
li#answer{color:navy;}//#answer为ID选择符，特指度为0，1，0，0

4.行内样式的特指度

特指度第一位为行内样式声明保留，行内样式声明的特指度比其他声明都高 。

5.重要性

重要声明超过其他所有声明，要在声明末尾的分号之前插入**!important**。
代码如下（示例）：

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

二、继承

继承指某些样式不仅应用带所指的元素上，还应用到元素的后代上。属性值绝对不向上传播，即元素的样式绝对不传给祖辈元素 。

• 很多属性是不继承的
• 多数盒模型属性也不能继承
• 继承的值没有特指度，连零都没有。

注意：应用到body元素上的背景样式会传递给html元素。这一例外仅发生在为body元素定义了背景而没有为html元素定义背景的情况下。

三、层叠

CSS的层叠规则：

1. 找到匹配特定元素的所有规则。
2. 按显式权重排序应用到特定元素上的所有声明。以!important标记的规则比没有这一标记的权重高。
3. 按来源排序应用到特定元素上的所有声明。声明有三个来源：创作人员、读者和用户代理。正常情况下，创作者编写的样式击败读者提供的样式；读者样式中以!important标记的声明比其他样式权重高，包括创作人员编写的样式中以!important标记的声明；创作人员和读者样式覆盖用户代理的默认样式。
4. 按特指度排序应用到特定元素上的所有声明。特指度高德声明具有较高的权重。
5. 按声明的前后位置排序应用到特定元素上的所有声明。样式表或文档中靠后的声明权重较高。导入样式表中的声明放在当前样式表中所有声明的前面。

1.按权重和来源排序

如果两个规则应用到同一元素上，而其中一个以!important标记，那么有此标记的规则胜出。
如果匹配元素的两个样式权重相同，而一个在创作人员编写的样式中，另一个在读者提供的样式表中，那么元素将使用创作人员编写的样式表中的样式。
在声明的权重上，要考虑五个方面，按权重从高到低列出：

1. 读者提供的样式中以!important标记的声明
2. 创作人员编写的样式中以!important标记的声明
3. 创作人员编写的常规声明
4. 读者提供的常规声明
5. 用户代理的默认声明

2.按特指度排序

如果应用到一个元素上的声明有冲突，而且各声明的显式权重和来源相同，那么应该按特指度排序，特指度最高的声明胜出。

3.按前后位置排序

如果两个规则的显式权重、来源和特指度都相同，那么样式中的位置靠后的规则胜出。