深入剖析 CSS继承
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.chinahtml.com</title><style type="text/css"><!-- .aaa{color:red;} h1{color:blue;}--></style></head><body><h1 class="aaa">CSS网页布局 - www.chinahtml.com</h1></body></html>
我们会看到运行的效果：因为选择符h1和.aaa都匹配上面的h1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.aaa这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。而字体的大小，却是h1默认的大小。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
Example Source Code
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
以下是一个按特性分类的选择符的列表：
Example Source Code
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具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。
- 上一篇文章： 没有了
- 下一篇文章： DIV+CSS制作另一导航条效果
文章评论
只显示最新5条。评论内容只代表网友观点，与本站立场无关！查看完整内容