important 的原型

什么是 !important？

在 CSS 中，!important 是一种用于提升某条样式声明优先级的特殊语法。 它可以让该声明“覆盖”其他具有更高选择器权重或后出现的规则。

优先级机制简述

CSS 样式优先级（Specificity）通常按以下顺序决定：

1. 内联样式（如 style="..."）
2. ID 选择器（如 #header）
3. 类、属性、伪类选择器（如 .btn, [type="text"]）
4. 元素和伪元素选择器（如 div, ::before）

而 !important 会打破这一规则，使其优先级高于所有非 !important 的声明。

使用示例

/* 普通规则 */
p {
  color: blue;
}

/* 使用 !important */
p {
  color: red !important;
}

即使前一条规则在后，只要带有 !important，文字颜色仍为红色。

注意事项

• 过度使用 !important 会降低代码可维护性。
• 两个 !important 规则之间仍遵循常规优先级规则。
• 建议优先通过合理的选择器结构解决问题，而非依赖 !important。