学习过面向对象语言的读者，对于继承的概念一定不会陌生。在ＣＳＳ语言中的继承并没有像在Ｃ＋＋和Ｊａｖａ等语言中的那么复杂，下面就ＣＳＳ的继承特性做一详细介绍。

简单的说就将将各个ＨＴＭＬ标记看作一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式。本节从页面各个标记的父子关系出发，来详细地讲解ＣＳＳ的继承。

一、什么是ＣＳＳ的继承特性

所有的ＣＳＳ语句都是基于各个标记之间的继承关系的，为ｒ更好地理解继承关系，首先从ＨＴＭＬ文件的组织结构人手，如下例所示，

相应的页面效果如图１所示：

图１　包含多层列表的页面

可以看到这个页面中，标题的前两个文字使用了＜ｅｍ＞（强调）标记，在浏览器中显示为斜体。后面使用了列表结构，其中最深的部分使用了三级列表。

这里着重从“继承”的角度来考虑各个标记之阃的“树”型关系。如图２所示。在这个树型关系中，处于最上端的＜ｈｔｍｌ＞称之为＂根（ｒｏｏｔ）＂，它是所有标记的源头，往下层层包含。在每一个分支中，称上层标记为其下层标记的“父”标记；相应地，下层标记称为上层标记的“子”标记。例如＜ｈ１＞标记是＜ｂｏｄｙ＞标记的子标记，同时它也是＜ｅｍ＞的父标记。ｌｏｄｉｄａｎｃｅ．ｃｏｍ

图２　继承关系树型图

二、ＣＳＳ继承的运用

通过上一节的讲解，已经对各个标记间的父子关系有了认识，下面进一步了解ＣＳＳ继承的运用。ＣＳＳ继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。

例如在前面的案例中加入如下ＣＳＳ代码，即将ｈｌ标记设置为蓝色，加上下划线，并将ｅｍ标记设置为红色，示例文件位于网页ＣＳＳ教程资源中“第１章＼１４．ｈｔｍ”。

显示效果如图３所示，可以看到其子标记ｅｍ也显示出下划线，说明对父标记的设置也对子标记产生效果，而ｅｍ文字显示为红色．ｈ１标题中其他文字仍为蓝色，说明对子标记的设置不会对其父标记产生作用。

图３　父子关系示例

ＣＳＳ的继承贯穿整个个ｃｓｓ设计的始终，每个标记都遵循着ＣＳＳ继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其是在页面内容很多且关系
复杂的情况下。

例如，现在如果要嵌套最深的第３级州表的文字显示为绿色，那么增加如下样式设置：

效果将如图４示，所有列表项目的文字都变成了绿色。要仪使＂ＣＳＳ＂项下的最深的３个项目显示为绿色，其他项目仍显示为黑色，该怎么没置呢？

图４　各级列表均变成绿色

一种方法是设置单独的类别，比如定义一个“．ｇｒｅｅｎ”类别，然后将该类别赋予需要变为绿色的项目，但是这样设置显然很麻烦。

可以利用继承的特性，使用前面介绍的“后代选择器”。这样不需要设置性的类别，即可完成同样的任务，示例文件位于网页ＣＳＳ教程资源中“第１章＼１５．ｈｔｍ”。

实际上，对上面的选择器，还可以化简，比如化简为：

效果也是完全相同的。最后给读者出一个选掸题，请读者思考，如果设置改为：

那么在最终的效果中，绿色显示的文字一共有几行，备选答案为：

（Ａ）　３行

（Ｂ）　６行

（Ｃ）　８行

（Ｄ）　９行

（Ｅ）　１０行

请读者一定要亲自在浏览器中实验一下．看一看结果如何，很可能和你想象的不同。如果和判断的结果不同，再仔细思考一下其中的原因。

以上就是精品学习提供的关于ＣＳＳ的继承特性的内容，希望能够带给您帮助。