必须在无法修改源码、调整权重或移除规则时才用!important；CSS-in-JS中优先级等同外部CSS，Vue scoped需:deep()穿透，React中&&为非标hack；内联style和浏览器默认!important规则不可覆盖。
什么时候必须用 !important
只有当样式被第三方库、框架默认样式或内联 style 属性锁死，且你无法修改源码、无法调整选择器权重、也无法通过 DOM 操作移除原有规则时，!important 才是合理出口。
比如 Vue 组件用了 scoped，但你想覆盖子组件里写死的 color: red !important；或者接入了某个 UI 库（如 Ant Design），它的按钮禁用态强制设了 opacity: 0.5，而设计要求完全不透明——此时改选择器权重没用，因为对方也用了 !important。
- 不是“想覆盖就加”，而是“别无选择才加”
- 加之前先确认：是否能换更具体的选择器？能否用
:deep()或::v-deep？能否提 PR 改源码？ - 如果只是为压过自己写的普通类名，说明选择器结构本身就有问题
!important 在 CSS-in-JS 和 Vue/React 中的行为差异
CSS-in-JS（如 Emotion、Styled Components）默认把样式注入 <style></style> 标签，优先级等同于外部 CSS 文件；但 Vue 的 scoped 会自动加属性选择器（如 [data-v-abc123]），导致即使你写了 button { color: blue !important }，也可能被 button[data-v-abc123] { color: red !important } 覆盖。
- Vue 单文件组件中，
:deep(button) { color: blue !important }才能穿透作用域，且!important必须写在:deep内部声明里 - React + Styled Components 中，
styled.button`&& { color: blue !important; }`可临时提权，但双&&是 hack，非标准方案 - 所有框架里，内联
style（如<div style="color: red">）永远高于任何 <code>!important外部规则常见误用：
!important压不住的三类情况很多人加了
!important还无效，不是语法错，而是根本没打中目标规则来源。立即学习“前端免费学习笔记（深入）”；
-
style属性里的值：比如元素有style="color: green"，任何外部!important都无效 - 浏览器默认样式表（user agent stylesheet）中带
!important的规则：如某些旧版 Chrome 对input[type=number]的appearance: textfield !important - CSSOM 动态插入的样式块（
document.styleSheets[0].insertRule(...)）若在你的规则之后执行，照样覆盖你
替代
!important的四个更稳路径真要覆盖，优先走这些路，比硬刚
!important更可持续。- 提高选择器特异性：把
.btn改成body .container .btn，或加 ID（#app .btn），但避免滥用 ID - 调整加载顺序：确保你的 CSS 在第三方 CSS 之后加载（
<link>标签位置靠后） - 用属性选择器伪造权重：如
button[data-type="primary"][data-type][data-type] { color: blue; }—— 看似荒谬，但确实比单个类名权重高 - 改用
all: unset重置再重写：适合局部强干预，但需手动补全所有需要的样式
真正难搞的，从来不是要不要加
!important，而是得先分清那条生效的规则到底从哪来、谁在管、能不能动源头。 -
