2.4 继承

继承（inheritance）主要描述(X)HTML元素从它的父元素继承样式属性的情况。如果没有为子元素定义特定的CSS，那么在某些情况下，子元素将继承赋予父元素的特定CSS值。这些地方CSS是层叠的，因此(X)HTML可以继承。

继承是一把双刃剑。它是一种非常有效的方法，但是也经常导致一些误解。当跨多个样式表时，它能带来很多混乱——尤其是在调试CSS过程中。因此，使用继承从一开始就要非常小心。另一方面，继承带来了样式表和标记最小化的优点，并且可以通过较少的工作量全面地改变许多CSS规则。一般说来，在(X)HTML元素中经常会有继承。但是，在大多数情况下，出于某些特殊原因，都需要一些方法来控制继承得到的值。

2.4.1 父元素与子元素

为了理解继承，可以将某些(X)HTML元素看成是父元素，而这些元素所包含的元素则是子元素。父元素拥有子元素，并将它所拥有的信息传递给子元素。在CSS中，继承的原理基本类似。但是在CSS中，继承向下传递的是样式，而不是关于教育或者异性的建议。

纵观(X)HTML标记，很多子元素同时还是其他元素的父元素，这样元素之间就形成了一个包含层次。这个包含层次也可以看成是一棵树。

2.4.2 继承的工作原理

为了解释继承，以标题作为例考虑。在这个例子中，<h1>标题通过如下的简单的规则添加了样式：

该规则非常简单。正常情况下，该规则将标题的颜色变成了深灰色。现在，(X)HTML使用标记<em>来表示需要强调的文字：

到现在为止，尚没有为<em>元素定义相应的CSS规则。因此，<em>元素中的文本将从h1（它的父元素）规则中继承颜色，即也为深灰色。为了覆盖这个继承的颜色，需要在样式表中定义<em>的规则。

这样，所有网站上要强调的文字都变成了红色，而不再从它的父元素继承颜色。值得注意的是，如果em选择器没有声明其他的属性，那么其他属性还将从父元素继承。因此，如果希望所强调的文本是它目前的字号的两倍的话，需要在em规则中规定font-size。如果你在p规则中定义这个规则，那么所有的文本都将变成两倍大小。

2.4.3 从body继承

我们强烈建议，在正规的CSS设计中，主样式表都以一个<body>元素声明开始。<body>元素不仅仅是结构良好的(X)HTML文件所必须的，它同时还是模版中所有可视元素（即不在<head>中的元素，在<head>中元素主要关注元信息和其他不在浏览器中显示的元素）的父元素。因此，每个元素都可以从它继承相关信息。

因此，在第一个样式表中，用body作为第一个选择器来定义所有的默认CSS样式是非常有意义的。在本书的后续章节中，body选择器将用来定义一些关键元素，如页边距、背景色、平铺图像、默认字体和字体颜色等，如下例：

因此，如没有特殊给定，CSS中的所有其他规则都将继承这些值。也就是说，只要子元素的选择器不做其他规定，且更直接包含这些子元素的父元素（如列或容器）的值不和从body中继承来的值相冲突，那么所有的标题、段落、列表以及其他元素都将具有黑色文本，该文本使用用户终端所建议的选项的第一个可用字体（font-family:Helvetica,Arial, sans-serif;）。

值得注意的是，部分样式属性是不会从父元素继承的——背景属性就是一个主要的例子。子元素实际并没有继承父元素的淡灰色背景，在此，父元素的背景是默认显示的，所以它们的背景一样。换句话说，子元素拥有继承来的字体颜色，但是并没有拥有相应的背景颜色。

注意如果不做特殊说明，所有元素的背景都是透明的。

2.4.4 提醒

和通过多个样式表实现层叠一样，如果你不好好跟踪这些操作，继承将会带来很大的麻烦。通常，对CSS而言，任何事情都具有两面性。下面是一个经典例子，该例子能解释继承可能会导致什么样的混乱。

譬如，你正在使用一个嵌套列表（至少有一个列表在另外一个列表内），其标记是如下的三级列表：