同为!important仍被覆盖，因!important仅提升声明层级，同层级下仍按来源优先级（内联>外部css）、权重四元组(a,b,c,d)逐位比较决胜负，而非“绝对胜利”。
为什么同为!important还会被覆盖
因为!important不等于“绝对胜利”，它只把当前声明提到最高优先级层级，但同一层级里仍要按选择器权重（specificity）决胜负。两条都带!important的规则相遇，浏览器会先比来源（比如内联样式 > 外部CSS），再比权重四元组 (a,b,c,d)，最后才看定义顺序。
- 常见错误现象：你在
.btn { color: red !important; }里加了!important，但 DevTools 中这条被划掉，悬停提示specificity is lower than another rule - 真实场景：Ant Design 的
button[disabled].ant-btn { color: #ccc !important; }权重是(0,2,1)，而你的.btn是(0,1,0)，直接落败 - 参数差异：权重不是相加总和，而是逐位比较——
(0,2,1)>(0,1,99)，哪怕你写了99个 class - 性能影响：过多!important + 高权重选择器会让 CSSOM 构建变慢，尤其在 SSR 或大量动态类名场景下
怎么快速定位真正压你一头的那条!important
别只盯着自己写的文件，真正对手往往藏在三个地方：
-
element.style：右键元素 → “View element in console”，运行getComputedStyle($0).color，如果来源标着inline，说明 JS 或框架已通过element.style.color = 'blue'硬写入——这种内联样式即使没!important，也比任何外部CSS的!important优先 - @layer 声明：比如 Ant Design 用了
@layer components，而你没声明同层或更高层（如@layer base, components, utilities），你的规则会被天然降级；DevTools Styles 面板里每条规则旁的小图标会标出@layer - 用户代理样式：某些表单控件（如
input[type="number"]::-webkit-inner-spin-button）被浏览器用!important锁死，必须用对应伪元素精准打击，普通选择器无效
为什么盲目加父级选择器常白忙活
把 .btn 改成 .header .nav .btn 看似提权，实则容易踩空：
- 父级类可能不存在或被 JS 动态移除，整条规则失效
- 权重提升不精准：
.header .nav .btn是(0,3,0)，但第三方库若用button[disabled].ant-btn（也是(0,3,0)），胜负就取决于谁定义在后 - Sass 嵌套过深会生成冗长选择器，编译后体积膨胀，且与 Shadow DOM 隔离机制冲突
- 更稳的做法是用
:where()主动降权再覆盖，比如:where(.my-theme) .ant-btn { color: red !important; }——:where()不增加权重，但确保生效上下文可控
哪些!important根本没法被CSS覆盖
JavaScript 写的内联样式（element.style.xxx）本该最高优先级，但加了!important的CSS规则仍能压它——这是设计使然。反过来，element.style.color = 'blue' 却无法覆盖 color: red !important;，除非你用 element.style.setProperty('color', 'blue', 'important') 显式带上 'important' 参数。
真正难搞的不是权重算错，而是你根本没意识到某条规则来自 element.style、@layer 或用户代理样式——这些不会出现在你自己的 CSS 文件里，却实实在在参与层叠计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
