CSS继承相关问题

人们常常将继承和层叠混为一谈。尽管它们初看上去有点儿相似,但是这两个概念实际上是很不一样的。幸运的是,继承是一个非常容易理解的概念。应用样式的元素的后代会继承样式的某些属性,比如颜色或字号。例如,如果将主体元素的文本颜色设置为黑色,那么主体元素的所有后代也显示黑色的文本。对于字号,也是这样的。如果将主体的字号设置为14像素,那么页面上的所有内容应该会继承这个字号。我说“应该会”是因为 Windows的IE和Netscape在继承表格中的字号方面有问题。为了解决这个问题,必须指定表格应该继承字号,或者在表格上单独设置字号。

如果在主体上设置字号,你会注意到页面上的标题没有采用这个样式。你可能会认为标题没有继承文本字号。但是,实际上是浏览器的默认样式表设置了标题字号。直接应用于元素的任何样式总会覆盖继承的样式。这是因为继承的样式的特殊性为空。

继承非常有用,因为它使开发人员不必在元素的每个后代上添加相同的样式。如果打算设置的属性是一个继承的属性,那么也可以将它应用于父元素。可以编写:

p, div, h1, h2, h3, ul, ol, dl, li {color: black }

但是下面的写法更简单:

body{color:black}

正如恰当地使用层叠可以简化CSS,恰当地使用继承也可以减少代码中选择器的数量和复杂性。但是,如果大量元素继承各种样式,那么判断样式的来源就会变得困难。