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

2024-07-11 08:25:00

字体：大中小

来源：转载

供稿：网友

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

4.6.1层叠的顺序
CSS的层叠对每一个样式规则指定一个权重。如果要应用若干个规则，那么权重最大的那个规则具有优先权。层叠规则依据下面几个步骤进行：
1.查找有冲突的元素
浏览器会找到那些存在疑问的元素和属性的声明，如果相关联的选择器匹配存在疑问的元素，则声明适用。
2.样式表的来源
按照规则的重要性（普通或者重要）和来源（用户、制作者或者浏览器）来从低到高排序：
1)浏览器的缺省样式；
2)用户定义的普通样式；
3)制作者定义的普通样式；
4)制作者定义的重要性（“!important”声明）样式；
5)用户定义的重要性（“!important”声明）样式。
提示：重要性（“!important”声明），请参见本书[4.6.4重要性]一节。
对于制作者定义的外部CSS文件引入的规则，它们的权重取决于它们引入的顺序。例如：
<linkrel="stylesheet"href="basic.css"type="text/css"media="all"/>
<linkrel="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;}
<pclass=”warning”>层叠和继承的规则如何实现？</p>
此代码在浏览器内显示如图4-31所示。
/web/css/selectors/031.gif