CSS教程：认识层叠规则互相作用

作者佚名技术来源 CSS技术浏览发布时间 2012-03-04

在本书的[2.3.1 (X)HTML与浏览器内置样式]一节曾经介绍过，样式表可能有三个不同的来源：制作者、用户和浏览器。这三个来源的样式表可能在范围上有重叠，它们根据层叠规则互相作用。

4.6.1 层叠的顺序

CSS的层叠对每一个样式规则指定一个权重。如果要应用若干个规则，那么权重最大的那个规则具有优先权。层叠规则依据下面几个步骤进行：

1. 查找有冲突的元素
浏览器会找到那些存在疑问的元素和属性的声明，如果相关联的选择器匹配存在疑问的元素，则声明适用。

2. 样式表的来源
按照规则的重要性（普通或者重要）和来源（用户、制作者或者浏览器）来从低到高排序：
1) 浏览器的缺省样式；
2) 用户定义的普通样式；
3) 制作者定义的普通样式；
4) 制作者定义的重要性（“!important”声明）样式；
5) 用户定义的重要性（“!important”声明）样式。

提示：重要性（“!important”声明），请参见本书[4.6.4 重要性]一节。

对于制作者定义的外部CSS文件引入的规则，它们的权重取决于它们引入的顺序。例如：
<link rel="stylesheet" href="basic.css" type="text/css" media="all" />
<link rel="stylesheet" href="font.css" type="text/css" media="all" />

则font.css中的定义高于basic.css中的定义。
对于在样式表中使用@import规则引入的其他样式表，优先级规则同样适用。
嵌入式样式表的规则高于从文件引入的样式规则。行内样式表则又高于嵌入式样式表。

3. 选择器的特殊性
声明的第2排序基于选择器的特殊性：特殊的选择器超越一般的选择器。伪元素和伪类分别被视为一般元素和一般类。

4. 规则出现的先后次序
最后，根据规则出现的先后次序来排列。如果两条规则具有相同的权重，相同的来源和相同的特殊性，则后出现的规则超越先出现的规则。
引入的样式表中的规则被认为出现在样式表本身的所有规则之前。
除了个别声明的“!important”指定，上述策略给予制作者的样式表比用户样式表更大的权重。

4.6.2特殊性的计算

既然有层叠的规则，那么，如果有如下代码，其在浏览器内会如何显示呢？
.warning { color: red; }
p { color: green; }
<

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 4 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 介绍我知道的hack方法下一篇: CSS网页布局强制换行和强制不换行的属性讲解

关于CSS教程：认识层叠规则互相作用的所有评论

随机推荐