锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / 网站前端开发 / CSS的层叠特性
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883

CSS的层叠特性


CSS的全名叫做“层叠样式表”,那么这里的“层叠”又是什么意思呢?下面我们将详细的讲解一下。

我们要注意的是,CSS的层叠特性确实很重要,但是我们千万不要把它和“继承”相混淆,它们二者有着本质的区别。实际上,层叠可以简单地理解为“冲突”的解决方案。

下面我们来举一个例子,例如有如下一段代码:

<html>
<head>
<title>层叠特性</ title >
<style type=”text/css”>
P{
Color:green;
}
.red{
Color:red;
}
. purple {
Color: purple;
}
#line1{
Color: blue;
}
</style>
</head>
<body>
<p>第一行文本</p>
<p class=”red”>第二行文本</p>
<p id=”line1” class=”red”>第三行文本</p>
<p style=”color:orange;” id=”line3”>第四行文本</p>
<p class=”blue red”>第五行文本</p>
</body>
</html>

代码中一共有5组 p 标记定义的文本,并在 head 部分声明了4个选择器,声明为不同颜色。下面的任务是确定每一行文本的颜色。

第一行文本没有使用类别样式和ID样式,因此这行文本显示为标记选择器p中定义的绿色。

第二行文本使用了类别样式,这时已经产生了冲突,但是类别选择器的优先级高于标记选择器,因此文本将会显示为红色。

第三行文本同时使用了类别样式和ID样式,那么这时的本文又将显示为什么颜色呢?答案是ID选择器的优先级高于类别选择器,因此文本颜色显示为ID选择器中定义的蓝色。

第四行文本同时使用了行内样式和ID样式,此时的文本是橙色。因为行内样式的优先级高于ID样式的优先级,所以文本显示为行内样式定义的橙色。

第五行文本中,使用了两个类别,因为两个类别选择器的优先级相同,所以此时以前者为准。

在复杂的页面中,某一个元素有可能会从很多地方获得样式,例如一个网站的某一级标题整体设置为使用绿色,而对某个特殊栏目需要使用蓝色,这样在该项目中就需要覆盖通用的样式设置。在很简单的页面中,这样的特殊需求实现起来不会很难,但是如果网站的结构很复杂,就完全有可能使代码变得非常混乱 ,可能出现无法找到某一个元素的样式来自于哪条规则的情况。因此,必须要充分理解CSS中“层叠”的原理。

计算冲突样式的优先级是一个比较复杂的过程,并不仅仅是上面这个简单的优先级规则可以完全描述的。但是我们可以把握一个大的原则,就是“越特殊的样式,优先级越高”。

例如,行内样式仅对指定的一个元素产生影响,因此它非常特殊;使用了类别的某种元素,一定是所有该种元素中的一部分,因此它也一定比标记样式特殊;以此类推,ID是针对某一个元素的,因此它一定比应用于多个元素的类别样式特殊。特殊性越高的元素,优先级就越高。

总结

CSS的层叠特性可以表述为:行内样式>ID样式>类别样式>标记样式。最后再次提醒读者,千万不要混淆了层叠与继承,二者完全不同。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内