CSS的层叠特性确实很重要,但是要注意,千万不要和前面介绍的“继承”相混淆,二者有着本质的区别。实际上,层叠可以简单地理解为“冲突”的解决方案。
例如有如下一段代码,示例文件位于网页学习网CSS教程资源“第1章\16.htm”。
- <html>
- <head>
- <title>层叠特性</title>
- <style type="text/css">
- p{
- color:green;
- }
- .red{
- color:red;
- }
- .purple{
- color:purple;
- }
- #line3{
- color:blue;
- }
- </style>
- </head>
- <body>
- <p >这是第1行文本</p>
- <p class="red">这是第2行文本</p>
- <p id="line3" class="red">这是第3行文本</p>
- <p style="color:orange;" id="line3">这是第4行文本</p>
- <p class="purple red">这是第5行文本</p>
- </body>
- </html>
代码中一共有5组p标记定义的文本,并在head部分声明了4个选择器,声明为不同颜色。下面的任务是确定每一行文本的颜色。
● 第1行文本没有使用类别样武和ID*F式,因此这行文奉显示为标记选a*8p中定义的绿色。
● 第2行文本使用了类别样式,因此这时已经产生了“冲突”。那么,是按照标记选择器p中定义的绿色显示,还是按照类别选择器中定义的红色显示呢?答案是类别选择器的优先级高于标记选择器,因此显示为类别选择器中定义的红色。
● 第3行文本同时使用了类别样式和ID样式,这又产生了“冲突”。那么,是按照类别选择器中定义的红色显示,还是按照ID选择器中定义的蓝色显示呢?答案是ID选择器的优先级高于类别选择器,因此显示为ID选择器中定义的蓝色。
● 第4行文本同时使用了行内样式和ID样式。那么这时又以哪一个为准呢?答案是行内样式的优先级高于ID样式的优先级,因此显示为行内样式定义的橙色。
● 第5行文本中,使用了两个类别样武,应以哪个为准呢?答案是两个类型选择器的优先级相同,此时以前者为准,“.purple”定义在“.red”的前面,因此显示为“.purpIe”中定
义的紫色。
因此,综上所述,上面这段代码的最示效果如图1所示。WANGYEXX.COM
![图1 层叠特性示意图](https://i-blog.csdnimg.cn/blog_migrate/9a4b49ce4e8479ef2b491523e7213023.png)
图1 层叠特性示意图
总结:优先级规则可以表述为:行内样式 > ID样式 > 类别样式 > 标记样式
在复杂的页面中,某一个元素有可能会从很多地方获得样式,例如一个网站的某一级标题整体设置为使用绿色,而对某个特殊栏目需要使用蓝色,这样在该栏目中就需要覆盖通用的样式设置。在很简单的页面中,这样的特殊需求实现起来不会很难,但是如果网站的结构报复杂,就完全有可能使代码变得非常混乱,可能出现无法找到某一个元素的样式来自于哪条规则的情况。因此,必须要充分理解CSS中“层叠”的原理。
注意:计算冲突样式的优先级是一十比较复杂的过程,并不仅仅是上面这个简单的优先级规则可以完全描述的。但是读者可以把捶一个大的原则,就是。越特殊的样式.优先级越高”。
例如,行内样式仅对指定的一个元素产生影响,因此它非常特殊;使用了类别的某种元素,一定是所有该种元素中的一部分,因此它也一定比标记样式特殊;以此类推,ID是针对某一个元素的,因此它一定比应用于多个元素的类别样式特殊。特殊性越高的元素。优先级就越高。
最后再次提醒读者,千万不要混淆了层叠与继承,二者完全不同。