!important 失效主因是层叠顺序未进入 specificity 比较阶段，而是被来源、重要性或 @layer 层级压制；需用 DevTools 查 origin 和删除线，验证选择器是否匹配及层级关系。
为什么 !important 都压不住你的样式？
不是优先级算错了，是层叠顺序（cascade order）根本没走到“比较选择器权重”这一步。css 层叠分四层：来源（origin）、重要性（importance）、层叠层（layer）、特殊性（specificity）。只有前三个都相同时，才比 specificity。常见情况是：你写的样式在普通样式表里，而框架（如 bootstrap）或组件库的样式用了 @layer，或者被 !important 标记的内联样式/用户样式表覆盖了。
检查方式很简单：打开 DevTools → 找到被覆盖的 CSS 规则 → 看右侧“Computed”面板里该属性是否被划掉，再点开“Styles”面板，观察每条规则旁的小图标：user agent、author、user、!important、@layer 的层级标记一目了然。
specificity 计算结果对但还是不生效？
用浏览器自带的 getComputedStyle() 或 DevTools 的“Computed”值验证，常会发现你自以为赢了的 selector 其实根本没匹配上元素——比如写了 .card .title，但实际 dom 是
，看起来对，可如果中间插了个 Shadow DOM 或 vue 的 v-if 动态移除了父节点，选择器就失效了。 - 用
document.querySelectorAll('.your-selector') 在控制台手动测试是否真能选中目标元素 - 注意伪类和伪元素：
:hover 只在悬停时生效，::before 的内容不属于 DOM 节点，无法被常规选择器链继续修饰 - 属性选择器带引号和不带引号等价，但值区分大小写：
[type="submit"] ≠ [type="Submit"]（html 中 type 值是小写）
用 @layer 控制层叠层顺序时踩的坑
document.querySelectorAll('.your-selector') 在控制台手动测试是否真能选中目标元素:hover 只在悬停时生效，::before 的内容不属于 DOM 节点，无法被常规选择器链继续修饰[type="submit"] ≠ [type="Submit"]（html 中 type 值是小写）@layer 控制层叠层顺序时踩的坑CSS @layer 不是“加个前缀就生效”，它必须显式声明层名且按声明顺序决定优先级。后声明的 @layer base 并不会覆盖先声明的 @layer components，除非它们同名且在同一作用域下重声明。
立即学习“前端免费学习笔记（深入）”；
- 全局层声明需放在所有样式之前（或至少在依赖它的样式之前），否则会被视为“未定义层”，降级为普通 author 样式
-
@layer utilities { .text-red { color: red; } }和@layer components { .btn { color: blue; } }—— 两者不冲突，但如果同一元素同时命中，components层因声明靠后而胜出 - 不要混用
@layer和!important：在层内加!important只提升该层内的相对权重，跨层时仍以层序为准
内联样式和 js 注入样式为什么总赢？
内联样式（style="..."）属于 author origin，但它的层叠层默认高于外部样式表，且 specificity 固定为 1000（高于任何纯 CSS 选择器）。JS 通过 el.style.xxx = '...' 设置的也是同等级别。
- 想用 CSS 覆盖内联样式？只能靠同 origin + 更高层叠层（如
@layer inline-override）或!important（但仅限 author origin 内） - react/Vue 组件中大量使用
styleprop 或:style绑定时，记得在 CSS 文件里对应规则加上!important，否则大概率输 - 第三方 SDK 插入的
真正卡住的往往不是 specificity 数值本身，而是你没意识到某条规则根本不在同一场层叠竞赛里——它要么被 @layer 隔离了，要么来自更高 origin，要么压根没匹配成功。每次怀疑优先级时，先看 DevTools 里那条规则有没有灰色删除线，再点开它的“Origin”标注，比手算 0-1-0-1 实在得多。