CSS 优先级常见误区！“权重”不是简单的累加

有人告诉过你，行内是 1000，ID 是 100，类是 10，标签是 1，那么：20 个类选择器能否大于 1 个 ID 选择器呢？

答案是：当然不能！

这是很多新手常见的一个误区，权重计算不是简单的累加！

现在从头开始，给大家捋捋 CSS 的权重相关知识吧。

👉 权重

我们可以使用一个四元组 (a, b, c, d) 来表示权重，从高位到低位分别是：a > b > c > d。

• a ➡️ 行内样式
• b ➡️ ID 选择器
• c ➡️ 类、伪类、属性选择器
• d ➡️ 元素、伪元素选择器

“

❗️ 不要用数字1000,100,10,1表示权重，这在权重计算时真的很容易造成误解。

或者，你也可以忘记(a,b,c,d)，我们只需要记住这 4 类选择器就行了，行内>ID>类>元素。

👉 优先级规则

1. 普适性规则

• 元素的默认样式权重最低，任何自定义的样式都可覆盖；
• !important 权重最高，可覆盖任意权重样式；
• 相同权重，后面的样式覆盖前面的样式；
• 只能对单一的样式进行覆盖，而不是对整个选择器进行覆盖；

.box {
  margin: auto;
  background-color: red !important; /* 权重最高 */
}
div {
  width: 200px;
  height: 200px;
  background-color: blue !important;
}
div {
  height: 100px; /* 覆盖 height: 200px */
}
.box {
  margin-top: 50px; /* 只覆盖 margin-top: auto */
  background-color: yellow;
}

样式预览：

2. 权重计算规则

• 同级权重，才能累加计算；
• 不能越级计算(不能“进位”)。

❗️ 如果用数字1000,100,10,1表示权重，很容易陷入这个误区。

“

🌰 这是一个极端的例子：

20 个类选择器，累加权重就是20，但也没有 1 个 ID 选择器权重高。

因为类选择器对应c位，ID 选择器是b位，b > c，就算再多的类选择器累加也干不过权重级别。

❌ 如果用10表示类选择器，100表示 ID 选择器，很容易得出10*20=200 > 100的错误结论。

.box {
  margin: auto;
  width: 200px;
  height: 100px;
  color: white;
}
#box {
  background-color: blue; /* ID选择器 > 类选择器 */
}
.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box {
  text-align: right; /* 同级累加：20 > 3 */
  background-color: white;
}
.box.box.box {
  text-align: center; /* 累加：3 */
}

样式预览：

3. 混合权重

如果规则中混合了 ID、类、元素等多级权重，则从高位到低位，依次比较，高位相同，才继续往下比较。

.box {
  margin: auto;
  width: 200px;
  height: 100px;
}
#box.box.box {
  background-color: green;
}
div#box.box {
  background-color: blue;
}
#box.box {
  background-color: red;
}

样式预览：

👉 简单记忆

• ✅ 行内 > ID > 类 > 元素
• ✅ 同级才能累加比较
• ✅ !important 最高
• ✅ 从高到底，依次比较

感谢阅读

如果学到了，就点个“关注”吧~

👇️👇️👇️