前言
持续总结输出中，今天分享的是Web前端，CSS不同选择器的优先级、 CSS权重叠加计算
css优先级的介绍
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
css的优先级公式:
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
- !important写在属性值的后面，分号的前面!
- !important不能提升继承的优先级，只要是继承优先级最低!
- 实际开发中不建议使用 !important 。
权重叠加计算
场景: 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式: (每一级之间不存在进位)
比较规则:
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- ......
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算!
注意点:
!important如果不是继承，则权重最高，天下第一!
权重叠加计算案例
权重计算步骤:
-
先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
-
通过权重计算公式，判断谁权重最高
注意点:
• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>普通权重</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* (0, 2, 0, 0) */
#father #son {
color:blue;
}
/* (0, 1, 1, 1) */
#father p.c2 {
color:black;
}
/* (0, 0, 2, 2) */
div.c1 p.c2 {
color:red;
}
/* 继承, 最低 */
#father {
color:green !important;
}
/* 继承, 最低 */
div#father.c1 {
color: yellow ;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行文本是什么颜色的？
</p>
</div>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重叠加中每位不存在进制</title>
<style>
/* (行内, id, 类, 标签) */
div div div div div div div div div div div div {
color: red;
}
.one {
color: pink;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="one">这行文字是什么颜色的？</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重相同时比较层叠性</title>
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}
/* (0, 1, 0, 1) */
div #box3 {
color:green;
}
/* (0, 1, 0, 1) */
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色的？
</div>
</div>
</div>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全是继承的特殊情况</title>
<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */
/* 继承 */
div p {
color:red;
}
/* 继承 */
.father {
color:blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span>文字</span>
</p>
</div>
</body>
</html>
运行结果：
总结
十分感谢你可以耐着性子看完，最后分享一句话：
我们很容易忘记我们活着本身就是极大的运气，一个可能性微小的事件，一个极大的偶然。 ——《黑天鹅》
本次的分享就到这里了！！！
欢迎在评论区留言讨论！！！
