css中的层叠（级联）的含义

最新推荐文章于 2024-05-14 04:45:15 发布

将心666666

最新推荐文章于 2024-05-14 04:45:15 发布

阅读量4.2k

点赞数 1

分类专栏： CSS 文章标签： css 级联含义层叠含义

本文链接：https://blog.csdn.net/jiangxindu1/article/details/39755337

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS的全名叫做Cascading Style Sheets，译为层叠样式表（也可以叫级联样式表）。那么“层叠”是什么意思呢？为什么这个词如此重要，以至于出现在它的名称里面。

层叠，可以简单的理解为“冲突”的解决方案，总结如下：

上代码：

<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>

运行结果如下：

第一行，没有其他的类别样式，所以显示为标记选择器p中定义的绿色；

第二行，增加了类别样式，有了“冲突”，那么怎么显示呢？由于使用了类别的某种元素，一定是所有该种元素的一部分，因此它比标记样式“特殊”，因为特殊，所以优先级高，显示为红色。

第三行，增加了id样式，与类别样式“冲突”，由于ID是针对某一个元素的，唯一标记。所以ID比类别又要“特殊”，所以优先级比较高，显示为蓝色。

第四行，增加了行内样式，行内样式仅仅针对指定的一个元素产生影响，比ID更加“特殊”，所以优先级更高，显示为橙色。

第五行，使用了两个类别样式，优先级相同，怎么办？额。。。。。这个由于.purple定义在.red的前面，