!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 计算结果对但还是不生效？
用浏览器自带的 CSS 立即学习“前端免费学习笔记（深入）”； 内联样式（ 真正卡住的往往不是 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 控制层叠层顺序时踩的坑@layer 不是“加个前缀就生效”，它必须显式声明层名且按声明顺序决定优先级。后声明的 @layer base 并不会覆盖先声明的 @layer components，除非它们同名且在同一作用域下重声明。
@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 = '...' 设置的也是同等级别。
@layer inline-override）或 !important（但仅限 author origin 内）style prop 或 :style 绑定时，记得在 CSS 文件里对应规则加上 !important，否则大概率输 标签默认也是 author origin，但插入时机晚于你的 CSS 文件，可能靠后+同层而胜出specificity 数值本身，而是你没意识到某条规则根本不在同一场层叠竞赛里——它要么被 @layer 隔离了，要么来自更高 origin，要么压根没匹配成功。每次怀疑优先级时，先看 DevTools 里那条规则有没有灰色删除线，再点开它的“Origin”标注，比手算 0-1-0-1 实在得多。
