加了 !important 仍被划掉是因为存在更高特异性或更高优先级的 !important 规则，此时权重（specificity）或来源（如内联样式、@layer、用户代理样式）决定胜负，而非顺序或“狠度”。
为什么加了 !important 还被划掉
不是浏览器出问题，而是你写的 !important 正在和另一条同样带 !important 的规则正面刚——此时比的不是“谁更狠”，而是“谁权重更高”或“谁来源更优先”。比如你写 .btn { color: red !important; }，但第三方库写了 button[disabled].ant-btn { color: blue !important; }，后者权重是 (0,2,1)，前者是 (0,1,0)，直接落败。
- 打开 Chrome DevTools → Elements 面板 → 选中目标元素
- 在 Styles 面板里找你的规则，看是否被横线划掉；如果划掉了，鼠标悬停会显示
specificity is lower than another rule - 点开那条划掉的规则，右侧明确标着
specificity: 0,2,1这类值，拿来和你自己的对比 - 注意：同为
!important时，specificity比不过就输，不看顺序；但若对方是内联样式（哪怕没!important），你连比的机会都没有
如何快速定位“真正在打架”的那条规则
别只盯着 Styles 面板里自己写的 CSS 文件。真正压你一头的，可能藏在三个地方：
-
element.style：右键元素 → “View element in console”，运行getComputedStyle($0).color，结果如果是"rgb(0, 0, 255)"且来源写着inline，说明 JS 或框架已硬写进 style 属性 - 第三方库的
@layer声明：比如 Ant Design 用了@layer components，而你没声明同层或更高层，你的规则天然被降级——DevTools 中 Styles 面板每条规则旁有小图标，标着@layer的就是它 - 用户代理样式（user agent）：极少见，但某些表单控件（如
input[type="number"]的 spinner）会被浏览器默认样式用!important锁死，这时必须用[type="number"]::-webkit-inner-spin-button这类伪元素精准打击
为什么父级嵌套 + !important 常常白忙活
把 .btn 改成 .header .nav .btn 看似提权，实则容易踩空：
- 父容器类名可能动态增删（比如 JS 移除了
.nav），整条规则瞬间失效 - 编译后选择器变成
.header .nav .btn（权重 0,3,0），但 Ant Design 的button.ant-btn-primary也是 0,3,0 —— 权重相等，胜负取决于谁在 CSS 文件里定义得更靠后 - Sass 嵌套过深会生成冗长选择器，和 Shadow DOM 的样式隔离机制冲突，导致规则根本进不了组件内部
- 更隐蔽的问题：
:is()或:where()包裹后不会提升权重，比如:where(.a) .btn权重还是按.btn算（0,1,0）
真正该做的三件事
与其反复加 !important，不如把控制权拿回来：
- 用
[data-theme="dark"] .btn替代.dark-theme .btn：属性选择器稳定、不易被 JS 动态清除，权重也够用（0,1,0） - 对必须覆盖的内联样式，搭配高特异性选择器一起用：
button[data-override="width"] { width: auto !important; }，再由 JS 控制dataset.override = "width" - 过渡类（
transition）绝对不要加!important——它会让浏览器认为这是“快照式声明”，而非持续生效的上下文；改用基础类如.transition-base { transition: all 0.2s ease; }，并在所有需要动画的元素上始终保留该类
最常被忽略的一点：很多“覆盖失败”，其实发生在你写完 CSS 的几毫秒之后——JS 框架（React/Vue）在组件挂载后立刻执行 element.style.color = 'blue'，你的样式还没来得及生效就被抹掉了。这时候查权重毫无意义，得去翻框架的生命周期钩子或 ref 更新逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
