快速业务通道

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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号