CSS选择器的权重定义如下：
- !important 权重无穷大
- 行内样式 权重1000
- id 权重100
- class 权重10
- 标签名 权重1
1.一定要注意选择器是否精准的选择到目标元素，精确选择比权重叠加的优先级高。
2.每一位上，满10不能进1。
下面我们通过代码来分析一下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css样式的权重叠加</title>
</head>
<style>
.box{ /* 10 */
color:green;
}
p{ /* 1*/
color:red;
}
p .s{ /* 1 10 */
color:purple;
}
.box span{/* 10 1 */
color:blueviolet;
}
</style>
<body>
<div class="box">
盒子
<p class="pp">
段落
<span class="s">文字</span>
</p>
</div>
</body>
</html>
显示结果如下：
以上代码中，首先使用class选择器选择了父盒子div，将文字颜色设置为绿色，div中包含了p标签和span标签，此时如果不设置其它选择器，三个标签中的文字都应该是绿色。
然后又使用标签选择器精确选中了p，并设置了p标签的颜色，此时虽然标签选择器的权重只有1，但由于是精准选中的，所以p标签的文本颜色变为了红色。
然后又分别用p .s和.box span，它们的权重叠加结果都是11，因为不产生进位，所以都是10。又由于二者都精确选中了span元素，所以后面的覆盖了前面的，span的最终颜色为blueviolet。
|
窥视卡
雷达卡
发表于 2023-1-31 23:04:21
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 15:12:21
