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

作者：佚名    教程来源：不详    点击数：加载中...    更新时间：2008-4-30 字体:[大 中 小]

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

　　有时候继承也会带来些错误，比如说下面这条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
　　P EM {color:purple;}                    特性值为：2
　　.apple {red;}                           特性值为：10 
　　P.bright {color:yellow;}                  特性值为：11
　　P.bright EM.dark {color:brown;}           特性值为：22
　　#id316 {color:yellow}                   特性值为：100

　　从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。