4.4 CSS 继承(Inheritance)

CSS的继承基于HTML的层级关系

为什么需要继承

设想一下,如果我们想把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) 属性。