在CSS的世界中也存在着权力即CSS权重
1. 概念
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式
2. 以前的BUG
在实际开发中，我们常常会遇到样式不生效的问题，百思不得其解，其实这就是CSS的权重在作祟， 下面举个栗子
-
<style>
-
#txt{
-
color: black;
-
}
-
p{
-
color: aqua;
-
}
-
</style>
-
<body>
-
<p id="txt">CSS的权重问题
</p>
-
</body>
段落为id选择器所赋的黑色如图：
3. 权重计算
大家都了解二进制如何比较大小吧：0010>0001 。
其权重计算与其类似。
4.权重的叠加
权重叠加计算的时候就是将叠加的权重都加起来，就像二进制加法一样，但是要记住权重可以发生叠加，但是不能发生进位可以出现 0 0 0 10 但是不能将后面的10进一位
-
div
span {
-
/* 0,0,0,2 */
-
}
-
p
#span_one{
-
/* 0,1,0,1 */
-
}
-
p{
-
/* 0,0,0,1 */
-
}
浏览器会执行权重最大的样式，这就是选择器的权重
每个选择器都有自己的权重，组合选择器由相加计算得到
且选择器权重不会满十进一：0,1,0,0>0,0,28,0
-
<style>
-
p {
-
color: aqua;
-
}
-
p
#txt{
-
color: blue;
-
}
-
p
.txt{
-
color: chocolate;
-
}
-
</style>
-
<p id="txt" class="txt">CSS的权重问题
</p>
-
<p>权重的计算
</p>
-
<p class="txt">优先渲染权重最大的样式
</p>
结果如图：
4. 加载顺序
除了权重之外，CSS的渲染规则还有一种即根据css的引入顺序来加载。
同权重的选择器，顺序在后面的最后被加载会覆盖之前的样式
也就是我们平时所说的就近原则，选择靠近结构的那个选择器进行渲染
-
p{
-
color:green;
-
}
-
link
-
link
-
p{
-
color:green;
-
}
我们这里改变了两者的顺序，那么我们将会看到顺序最后引入的样式，后面的样式覆盖前面的样式
转载：https://blog.csdn.net/m0_68997646/article/details/128755642
查看评论