CSS样式权重的级联cascade的概念

W3C是这样来描述的:css级联为每个样式规则指派权重,若元素应用了多个样式规则,那么将优先使用权重最高的的样式。

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>

  

运行结果如下:


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

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

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

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

第五行,使用了两个类别样式,优先级相同,这个由于.purple定义在.red的前面,<p class="purple red">,注意是class中定义的时候的前面,不是在style中写的时候在前面,所以呢,就显示为.purple中定义的紫色。

posted @ 2021-07-16 11:31  Peter_Yang0942  阅读(137)  评论(0编辑  收藏  举报