2.7  样式表的层叠性

2.7  样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。

例如，在div标记中嵌套p标记：

div {
color: red; 
font-size:9pt
} 
<div>
<p>

这个段落的文字为红色9号字

</p>
</div>

此时p元素里的内容会继承div定义的属性。

有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档body一样的上边界值。

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：

div {
color: red;
font-size:9pt
} 

p {
color: blue
} 
<div>
<p>

这个段落的文字为蓝色9号字

</p>
</div> 

可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。对于ID选择符、类选择符和HTML标记选择符，因为ID选择符是最后加上元素的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：

p { 
color: #FF0000!important;
} 
.blue {
color: #0000FF;
} 
#id1 {
color: #FFFF00;
}

我们同时对页面中的一个段落加上这3种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。