Selectutorial: 继承

继承

HTML页面是一个文档树，拥有祖先，后代，父母和孩子 - 就像一颗家族树一样。

在一个家族中，一个显著的特点是由祖先向后代依次传递。在一个文档树中，有些CSS属性从祖先元素向后代元素传递。这叫做继承。

继承可以为文档树中的各层元素指定特定的CSS规则，从而节省了您的时间。

例如，如果您为<body>元素设置了一个特定的字体颜色，这种颜色将在<body>下层所有继承的元素得到使用，除非我们再为特定的元素设定样式。


		body { color: blue; }

Document tree diagram showing universal selectors

有的时候某些属性是不被继承的，包括外边距，内边距，边框和背景色。这是有原因的。如果所有的CSS属性都被继承了，那么我们就不得不在我们不需要它们的地方关闭每一层的设置。

关于所有的CSS2属性和它们的可继承性，请参阅W3C Property index.

字体大小属性不能像其它属性那样直接被继承。不像整个声明被继承，字体属性只有数值可以被继承。当您为字体大小设置绝对数值单位（例如14px）时，这并不明显，但是当您使用相对数值单位（例如80%或者.8em）时，这种情况就尤为明显。相对数值已经在上一层被设置并且仅仅传递给它的孩子元素。

例如，如果您在一个<div>元素中设置了相对数值单位的文字尺寸，那么它将只会被它的孩子们继承，而不是所有的后代。因此，直接包含在<div>元素内的<em>元素和<p>元素将继承上一层所设置的尺寸，但是后代元素，比如<strong>元素将无法得到继承。


		div { font-size: 85%; }

Diagram of inherited font-size

字体大小有时会产生许多奇怪的副作用。例如，您为<div>元素设置一个相对的尺寸（80%），那么其它的嵌套<div>元素也将继承这个尺寸 - 也就是说他的字体大小将变成80% x 80% = 64%

解决方法是只在一层上设置相对宽度，或者为一个元素选择特定的实例。为您可以将元素选择器和ID选择器合并使用来替代只使用一个元素选择器：


		div#main { font-size: 85%; }