4.4 CSS 继承（Inheritance）

为什么需要继承

设想一下，如果我们想把HTML文档所有的文本颜色设置为灰色，你可以把所有元素都罗列出来，像下面这样：

p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6{ color: grey;}

但是这样的代码是累赘且效率低下的。

学过面向对象编程（OOP）的同学，应该知道继承是代码复用的关键机制，通过继承多个对象可以共享一个属性或函数而无须重复声明。CSS继承机制的设计动机也是类似的。

继承方式

CSS利用HTML的文档层级关系，使得属性的值能通过层级关系从上到下的传承下去。 我们知道 body 是HTML文档内容中所有元素的根标签，那么上面的例子，我们实际上只需要给 body 设置颜色，就能达到相同的目的：

body{ color: grey;}

所有子元素和后代元素都将从 body 继承（inherit） 颜色值：grey

显然，上述例子我们也可以使用 html 标签。

可继承的属性

只有一部分属性具备可继承性，主要是一些文本属性：

• 文本颜色
• 字体（font）(family, size, style, weight)
• 行高（line-height）

注意有一些HTML元素并不遵从继承性规则，比如a链接就不继承 颜色（color） 属性。