!important 会直接破坏浏览器的层叠计算逻辑，它使声明脱离特异性比较，进入高优先级队列，同属性下恒压普通声明，但多个 !important 冲突时仍按特异性决胜。
!important 会直接破坏浏览器的层叠计算逻辑
CSS 的层叠（cascading）不是靠“谁写在后面就赢”，而是由三部分共同决定：来源顺序、特异性（specificity）和 !important 标志。一旦某条声明带了 !important，它就跳出了常规权重体系——不再参与 0,1,2,1 这类特异性数值比较，而是被浏览器单独归为“高优先级队列”。这意味着：
- 同属性下，
!important声明永远压过普通声明，哪怕后者是内联样式 - 但多个
!important冲突时，特异性仍起作用：比如#header .btn { color: red !important; }会胜过.btn { color: blue !important; } - IE6 在同一规则块内会忽略前面的
!important（如color: red!important; color: black;），现代浏览器已无此问题，但老项目兼容性仍需留意
用更具体的选择器替代 !important 才是真解法
多数人加 !important 的真实原因是“我写的样式没生效”，但根源往往不是优先级不够，而是选择器没匹配到目标元素，或被更高特异性的规则覆盖。此时应优先检查并升级选择器，而不是打补丁：
- 从
.card改成.layout-main .card，特异性从 0,1,0 升到 0,2,0 - 避免用
div.card这类“标签+类”组合（0,1,1），改用.card--primary（0,1,0）配合 BEM 命名，语义更强且更可控 - 若需覆盖第三方库（如 Ant Design 的
.ant-btn），可用[class*="ant-btn"]或.my-page .ant-btn，而非直接上!important - 慎用 ID 选择器（如
#app .btn）来提权——ID 特异性过高（1,0,0），后续几乎无法被合理覆盖
调试时看到 !important 红色标记，别急着删，先查三层
开发者工具里标红的 !important 不是 bug 提示，而是“这里有人强行干预了层叠逻辑”的信号。遇到它，建议按顺序排查：
- 该样式是否真的被其他规则覆盖？用“Computed”面板看最终生效值，确认是不是误判
- 覆盖它的那条规则是否来自外部 CSS（如 CDN 加载的组件库）或用户代理样式（如
input[type="number"]的默认appearance）？这类场景才真正需要!important - 是否存在重复加载 CSS 文件、或
@import位置错误，导致本该后加载的样式反而先解析？
max-width / max-height 是少数能绕过 !important 的属性
这是容易被忽略的边界情况：!important 并非对所有属性都“绝对胜利”。例如：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 200px !important;
max-width: 100px;
}
最终宽度是 100px，因为 max-width 是约束型属性，它在渲染流程后期介入，强制限制尺寸上限——这个行为发生在 !important 的层叠计算之后。类似逻辑也适用于 min-height、clip-path 等具有运行时约束能力的属性。
这种机制意味着：即使你写了 !important，也不能假设它对所有视觉效果都有终局控制力。真正影响布局结果的，往往是属性本身的语义与浏览器渲染阶段的协作关系。
