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

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

CSS的全名叫做Cascading Style Sheets，译为层叠样式表（也可以叫级联样式表）。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 @   Peter_Yang0942  阅读(140)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示