1.5.5 样式继承与层叠

所谓继承，就是有些CSS属性不仅影响当前元素，还会影响这些元素的后代。假如给 body设置的样式为：

body {    color: red;}

由于color属性具有继承性，那么 body 内部的元素，如果没有对 color 设置其它规则，都将显示为红色。

继承可以简化样式表，并使之更加高效。假如想让网页上的所有文本都使用同一种字体，就不必给为每个元素创建样式，而只需给 body 元素创建一个样式即可。如：

body {   font-family: Arial;}

在 body 元素中定义字体之后，网页上的所有元素都将继承这种字体。这种方法很高效，也很轻松，这就是继承的魅力所在。

当然，继承也可以应用于网页的某一部分。如，用 div 定义了一个区域，通过给该 div 应用样式，可以只给该区域内是所有元素使用特殊的样式。如：

div {    color: green;}

在 div 元素中定义文本颜色之后，包含在该 div 内部的任何元素，如p、h1、div等，都将继承相同的文本颜色。

并非所有的CSS属性都能被继承，有许多CSS属性根本不会传递给其后代，如 border 属性。给 body 增加边框，则不会影响到它的后代。当然，这也是有道理的。如果 border 属性也能被继承，则给 body 增加边框后，页面的所有元素都将会有一个边框，这显然不合适。因此，影响元素位置的那些属性，如 margin、padding、border等，都不具有继承性。

但是，无论一个属性是否具有继承性，如果将它的值显式地设置为 inherit，它就具有继承性。假设在一个 article 元素中包含几个段落，并为 article 元素设置了一个边框。如果定义以下规则：

p {    border: inherit;}

这条规则就可以强制段落元素继承父元素的 border 属性，从而使 article 元素中的所有段落，都获得与父元素相同的边框样式。

所谓层叠，就是样式的冲突规则，是指一个元素的同一个属性，被多个CSS规则同时定义时，如何应用这些样式规则。

CSS的层叠规则是：如果这些规则不冲突，则它们会同时生效；如果某些规则相互冲突，则高优先级的规则会生效；如果相同优先级的规则发生冲突，则最后定义的样式规则会生效。如，对 p 元素定义了两个样式规则：

p {    font-size: 14px;    font-family: Arial;}p {    font-size: 16px;    color: black;}

font-family 和 color 属性，两个选择器的规则没有冲突，这两个规则会同时生效。而这两个选择器同时定义了 font-size 属性，故 font-size 属性发生冲突，由于这两个选择器的优先级相同，则后定义的样式会覆盖先定义的样式，故后定义的 font-size: 16px 会生效。经过层叠后，p 元素的最终样式就变成了：

p {    font-size: 16px;    font-family: Arial;    color: black;}