5.2.4 层叠样式
对于每一个元素，每个浏览器都有其默认样式，可以用自己的样式覆盖它们或对它们进行补充。
那么，如果某一个元素上应用了多条样式规则，会发生什么情况？例如，一段文字，有几个样式规则同时作用在它上面，一个设置其颜色为红，一个设置其颜色为蓝，在这些相互冲突的规则中应该应用哪个规则，就是本节要讨论的内容。CSS用层叠的原则来考虑继承、特殊性和位置等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。
1.继承
很多CSS属性不仅影响选择器所定义的元素，而且会被这些元素的后代继承，例如：
假设所有的p元素显示为红色，并且带有黑色边框。em和strong元素包含在p元素里，因此它们是p元素的子元素。由于color属性是继承的，border属性不是，那么，p元素里包含的任何元素都会是红色的，但不会有黑色的边框，如图5-21所示。在本例中，并没有显式地指定em和strong元素的样式，它们从其父元素p那里继承字体、字号、颜色等属性。斜体来自浏览器为em设的默认样式，同样，加粗为strong的默认样式。
2.特殊性
继承决定了一个元素没有应用任何样式时应该怎样显示，而特殊性则决定了应用多个规则时应该怎样显示。根据特殊性原则，选择器越特殊，规则就越强。
例如，针对p元素的颜色定义4个具有不同特殊性的规则，代码如下：
图5-21 样式的继承
第一个影响所有的p元素，第二个只影响class属性为group的p元素，而第三个和第四个则只影响id属性为last的唯一的p元素。
将其分别应用到不同的段落中，代码如下：
这里有3个段落：第一个是一般的，第二个是带有一个class属性的，第三个是同时带有一个class属性和一个id属性的。
注意，id属性被认为是最特殊的（因为它们在一个文件中必须是唯一的），而带class属性的选择器则比不带class属性的选择器更特殊。同时，具有多个class属性的选择器比只有一个class属性的选择器更特殊。在特殊性次序中，最低级的是只有元素名的选择器，这时继承的规则被认为是最一般的，可以被任何其他规则覆盖。
3.位置
有时候，特殊性还不足以判断在相互冲突的规则中哪一个应该优先，在这种情况下，规则的位置就可以起到决定的作用：晚出现的优先级高。
在上例中，第三个和第四个规则中定义的p＃last具有相同的特殊性，但由于第四个规则最后出现，因此它的优先级更高。
因此上例中的3个段落，第一个段落没有使用class或id属性，采用第一个规则的样式，段落为红色；第二个段落使用class属性，采用第二个规则的样式，段落为蓝色；第三个段落同时使用了class和id属性，由于id属性的特殊性最强，优先级比class属性高，因此采用id属性的样式，而同时定义的两个p＃last样式中，后定义的样式优先，因此采用第四个规则的样式，段落为洋红色，如图5-22所示。
图5-22 CSS中的特殊性和位置