CSS层叠性（一学就会）
程序员文章站
2022-06-04 14:42:00
...
层叠性：就是css处理冲突的能力，这里涉及到权重计算
举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aa .bb li{
color:blue;
}
#aa ul li{
color: red;
}
</style>
</head>
<body>
<div id="aa">
<ul class="bb">
<li class="cc">我是啥颜色</li>
</ul>
</div>
</body>
</html>
运行代码可以发现文本显示的颜色为蓝色，这是因为权重 id选择器>类选择器>标签选择器
通常权重比可看作 1个id选择器=255个类选择器（这个了解就行）
#aa .bb li //为 1个id选择器，1个类选择器，1个标签选择器
#aa ul li //为 1个id选择器，2个标签选择器
所以最终显示为蓝色
我们再看一个例子
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aa .bb li{
color:blue;
}
#aa ul .cc{
color: red;
}
</style>
</head>
<body>
<div id="aa">
<ul class="bb">
<li class="cc">我是啥颜色</li>
</ul>
</div>
</body>
</html>
如果计算一下的话就可以发现，上面两个css的权重是一样的，就个时候就要看就近原则，谁在下面就显示是谁， #aa ul .cc在下面，所以显示结果为红色。
当然计算权重的前提是css指向了文本的标签权责器li或者类选择器cc，假如只是继承父类属性的话，就按照就近原则，比如
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aa{
color:blue;
}
div ul{
color: red;
}
</style>
</head>
<body>
<div id="aa">
<ul class="bb">
<li class="cc">我是啥颜色</li>
</ul>
</div>
</body>
</html>
如果只比权重类选择器#aa肯定要高于2个标签选择器div ul的，但2个标签选择器离文本更近，所以最终显示红色，只需记住一句话，先比远近，再比权重
有什么问题欢迎私信我~
上一篇： js语法
下一篇： css（八）- 层叠性