深入了解CSS的继承性及其应用

核心提示：编者：所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质，继承特性最典型的应用通常发挥在整个网页的样式预设，深入了解CSS的继承性及其应用，需要指定为其它样式的部份设定在个别元素里即可，这项特性可以给网页设计者提供更理想的发挥空间，( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)，但同时继承也有很多

　　编者：所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则，应用的时候容易让人迷惑，donger今天就专门和大家聊聊这方面的应用。

　　正文

　　CSS是层叠样式表（Cascading Style Sheets）的简称，它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，很少没有听说过CSS了吧，因为在制作网页过程中我们经常需要用到。

　　CSS允许我们为文档设置更为丰富且便于修改的外观，可以减轻网页设计者的工作负担。这里我们主要想和朋友们一起对CSS的继承性和特殊性进行一点深入的探讨。

一、继承

CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明：

样式定义：body{color:red;}

应用举例代码：<p>CSS的<strong>层叠和继承</strong>深入探讨</p>

应用举例效果：

这段代码的应用结果是：“CSS的层叠和继承深入探讨”这段话是红颜色的，“层叠和继承”由于应用了strong元素，所以是粗体。这很符合制作者的意图，也是为什么继承是CSS的一部分的原因。

　　二、CSS继承的局限性

在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。

首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。如下图所示，如果继承了边框属性，那么文档看起来就会很奇怪，除非采取另外的措施关掉边框的继承属性。

如上图所示，多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。

　　三、继承中容易引起的错误

有时候继承也会带来些错误，比如说下面这条CSS定义：

Body{color:blue}

在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成这样：

Body,table,th,td{color:blue}

这样表格内的文字也会变成蓝色。

四、多种样式混合应用

既然有了继承性，那么在样式表中的应用上可能会有些读者搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？先举个简单的例子：

样式定义：.apple{color:red;}　　H1{color:yellow;}

应用举例代码：<H1 CLASS=”apple”>这儿的苹果好红啊</H1>

应用举例效果：因为选择符H1和.apple都匹配上面的H1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

统计选择符中的ID属性个数。
　　统计选择符中的CLASS属性个数。
　　统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

H1 {color:blue;}　　　　　　　　　　　  特性值为：1