必须用!important仅限两类场景：一是覆盖无法修改的CMS或框架硬编码内联样式（如<button style="color:#333">），二是为可访问性插件注入的用户样式提供强制兜底；其他情况均属结构问题，不应滥用。
什么时候真该用 !important 而不是调选择器权重
只有两类场景算“必须用”：!important 不是调试开关，而是兜底手段。一是覆盖 CMS 或框架硬编码的内联 style 属性（比如 <button style="color: #333">），二是响应可访问性插件注入的用户样式（如系统级字体放大规则）。其他所有情况——包括“Ant Design 按钮颜色不对”“Tailwind 和 Element Plus 样式打架”“改了三遍还是没生效”——都属于结构问题，不该靠 !important 硬顶。
!important 覆盖不了什么，先确认再动手
加了 !important 还不生效？大概率踩了这三类坑：
- 同一选择器里多个
!important声明，仍按特异性（specificity）和源码顺序比大小，不是“谁吼得响谁赢” - 试图覆盖浏览器用户代理样式表里自带
!important的规则（例如 Chrome 对input[type="search"]的聚焦边框） - 对 CSS 自定义属性本身加
!important，比如--bg-color: red !important—— 无效，只能作用于使用它的声明，如background-color: var(--bg-color) !important
Tailwind 场景下开 important: true 的实操约束
当 Tailwind 的 @layer base 重置规则（比如 button { background-color: transparent }）把第三方组件按钮搞透明了，且你无法调整加载顺序或关掉 preflight，才考虑全局启用 important: true：
- 配置必须是布尔值
important: true，写成字符串"true"会静默失效 - 全局开启后，所有工具类自动带
!important，会干扰你后续用!text-sm这类手动前缀做精细控制 - 更稳妥的做法是局部锁定：在
tailwind.config.js中设important: '#app'，只让#app容器内的 Tailwind 规则带!important
写了 !important 就必须配注释
生产环境每处 !important 都得附带明确注释，否则等于埋雷：
立即学习“前端免费学习笔记（深入）”；
- 说明被覆盖的目标来源，例如
/* overrides antd v5 inline loading spinner */ - 禁止出现在全局 CSS 文件顶层，只允许写在 scoped 样式块或 Shadow DOM 内部
- 动画相关属性（
animation、transition、transform）严禁加!important，会导致渲染异常或卡顿
最常被忽略的一点：!important 不是解决冲突，是放弃对层叠路径的控制权。线上环境里，失控比不生效更难排查。
