除了层叠，还有一种给元素设置样式的方式：继承。经常有人把层叠与继承的概念弄混淆。它们虽然有关联，但也应该分辨清楚各自的特点。
如果一个元素的特定属性没有层叠值，则可能会继承某个祖先元素的样式值。在 <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 将 font-family 应用到父元素
body {
font-family: sans-serif; /* 被继承的属性值会传递到后代元素上 */
}
这样添加到 body 的样式会在整个页面生效。若将样式指定到特定元素，则该样式只会被其后代元素继承。被继承的样式会逐级传到后代元素，直到被某个层叠值覆盖。
使用开发者工具
被继承与覆盖的属性值在错综复杂的嵌套结构下会很快变得难以追踪。如果您还不熟悉浏览器的开发者工具，请务必养成使用它们的习惯。
DevTools 开发者工具可以精准查看哪些元素应用了哪些样式规则，以及为什么呈现这些样式。层叠和继承都是抽象的概念；而 DevTools 是目前已知最好的样式追踪手段。在一个页面元素上单击鼠标右键，选择弹出菜单中的 检查（Inspect）或 检查元素（Inspect Element）就能打开该工具。如图 1.x 所示。
图 1.x 浏览器的 DevTools 开发工具是查看元素样式的最佳方式样式检查器显示了目标元素的每个选择器，并按优先级进行排列。选择器样式的下方是继承的所有属性。元素所有的层叠规则与继承样式都一目了然。
还有很多功能细节可以帮助开发人员弄清目标元素当前样式的来龙去脉。靠近顶部的样式会覆盖掉下方的样式。被覆盖的样式会被划掉；右侧给出了每个规则集的样式表名称与行号，以便快速定位到源代码位置。这样就能准确知晓哪个元素继承了哪些样式，以及这些样式的具体来源。此外，还可以在顶部的
Filter筛选框中筛选出目标样式，同时隐藏其他无关内容。
