1.2 继承

还有最后一种给元素添加样式的方式：继承。经常有人会把层叠跟继承混淆。虽然两者相关，但是应该分别理解它们。

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。比如通常会给<body>元素加上font-family，里面的所有祖先元素都会继承这个字体，就不必给页面的每个元素明确指定字体了。图1-8展示了继承是如何顺着DOM树向下传递的。

图1-8 继承属性从DOM树的父节点传递到后代节点

但不是所有的属性都能被继承。默认情况下，只有特定的一些属性能被继承，通常是我们希望被继承的那些。它们主要是跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。

还有一些其他的属性也可以被继承，比如列表属性：list-style、list-style-type、list-style-position以及list-style-image。表格的边框属性border-collapse和border-spacing也能被继承。注意，这些属性控制的是表格的边框行为，而不是常用于指定非表格元素边框的属性。（恐怕没人希望将一个<div>的边框传递到每一个后代元素。）以上为不完全枚举，但是已经很详尽了。

我们可以在适当的场景使用继承。比如给body元素应用字体，让后代元素继承该字体（如图1-9所示）。

图1-9 给body应用font-family，让所有的后代元素继承相同的值

将代码清单1-13加到你的样式表开头，在网页中使用继承。

代码清单1-13 在父元素上添加font-family

将属性加到body上会在整个网页上生效。而将属性加到特定元素上，则只会被它的后代元素继承。继承属性会顺序传递给后代元素，直到它被层叠值覆盖。

使用开发者工具

当属性值被继承和覆盖时，这个路径会很难追踪。如果你还不熟悉浏览器的开发者工具，请开始养成使用它们的习惯。

使用开发者工具能够看到哪些元素应用了哪些样式规则，以及为什么应用这些规则。层叠和继承都是抽象的概念，使用开发者工具是最好的追踪方式。在一个页面元素上点击鼠标右键，选择弹出菜单上的检查元素，就能打开开发者工具，示例如下所示。

样式检查器显示了所检查元素的每个选择器，它们根据优先级排列。在选择器下方是继承属性。元素所有的层叠和继承一目了然。

有很多细节可以帮助开发人员弄清楚一个元素的样式是怎么产生的。靠近顶部的样式会覆盖下面的样式。被覆盖的样式上划了删除线。右侧显示了每个规则集的样式表和行号，你可以在源代码中找到它们。这样就能准确判断哪个元素继承了哪些样式以及这些样式的来源。还可以在顶部的筛选框中选择特定的声明，同时隐藏其他声明。

上一章目录下一章