内联样式（style属性）优先级最高，会覆盖任何CSS中的!important；当多个!important规则冲突时，按特异性（specificity）决胜；自定义属性本身不能加!important；Tailwind开启important:true反而引发兼容问题；!important本质是移交控制权，非修复手段。
被内联样式（style属性）覆盖了
这是最常见也最容易误判的情况：你写了 .btn { color: red !important; }，但按钮文字还是蓝的。不是浏览器不认 !important，而是目标元素本身带了 style="color: blue" —— 内联样式的权重是 (1,0,0,0)，天然高于任何外部 CSS 中的 !important 规则。
检查方法很简单：
- 在 Chrome DevTools 的 Elements 面板里右键目标元素 → “View element in console”
- 在 Console 里执行
getComputedStyle($0).color，如果返回值来源标着inline，就坐实了 - 再点开 Styles 面板，看
element.style区域有没有冲突声明
此时加再多 !important 都无效；真要解决，要么用 JS 移除原 style 属性，要么确认这确实是 CMS 或框架硬编码、无法修改的场景——这才算进“可用 !important”的窄门。
和另一个 !important 规则正面刚输了
当两条规则都带 !important，胜负不再看谁吼得响，而是比 specificity（特异性）和来源顺序。比如你写 .btn { background: #f00 !important; }（权重 0,1,0），但 Ant Design 的 button[disabled].ant-btn { background: #409eff !important; } 权重是 0,0,2,1，直接碾压。
立即学习“前端免费学习笔记（深入）”；
DevTools 会诚实告诉你原因：
- Styles 面板里你的规则被横线划掉 → 悬停提示
specificity is lower than another rule - 右侧明确标出
specificity: 0,0,2,1这类值，拿来对比即可 - 注意：同为
!important时，specificity不够就输，源码顺序没用
别只盯着自己写的文件，真正压你一头的规则可能藏在第三方库的 @layer components 声明里，或用户代理样式表中（如 input[type="search"]::-webkit-search-cancel-button）。
对 CSS 自定义属性（--xxx）加了 !important
--bg-color: red !important 是无效写法。CSS 自定义属性本身不参与层叠计算，!important 只能作用于使用它的声明，比如：
/* ❌ 无效 */
:root { --bg-color: red !important; }
<p>/<em> ✅ 正确 </em>/
.card { background-color: var(--bg-color) !important; }
如果你发现改了变量值但样式没变，先确认是不是在错误的位置加了 !important；另外，自定义属性的继承和作用域也会影响最终取值，不能只盯着优先级。
Tailwind 开了 important: true 却更难调了
启用 important: true 后，所有工具类（如 text-red-500）都会编译成带 !important 的声明。表面看“一劳永逸”，实际埋雷：
-
!text-sm这种响应式前缀会变成!text-sm !important，语法非法，直接失效 - Element Plus 的
.el-button.is-disabled本身也带!important，你开不开都打不过 - DevTools Styles 面板里满屏划掉线，根本分不清哪条生效、哪条被覆盖
真正该优先尝试的是关掉 preflight、用 @layer 控制层级、或写 [&]:w-[80px] 提升特异性——而不是靠 important: true 把整个系统拖进权重泥潭。
最常被忽略的一点：!important 不是修复工具，是控制权移交凭证。它不解决冲突，只是跳过层叠逻辑；一旦线上环境出现样式异常，失控比不生效更难定位。
