根本原因是层叠上下文和选择器权重被无意破坏，而非优先级不足；需检查层叠上下文触发条件、使用开发者工具查看真实specificity与Origin、采用contain隔离、用PostCSS插件自动检测。
为什么 !important 越用越多，样式还是压不住？
根本原因不是优先级不够，而是层叠上下文（stacking context）和选择器权重被无意破坏。比如在 React 组件中嵌套多个 div 并混用 className 与内联 style，或 Vue 中 :deep() 和 scoped 同时作用，都会让浏览器实际计算的层叠顺序偏离预期。
-
!important只影响单条声明的优先级，不改变元素所属的层叠上下文层级 - 父元素设置了
z-index但没触发层叠上下文（如缺少position: relative），子元素的z-index就无效 - CSS-in-JS 库（如 Emotion）生成的类名哈希值可能打乱你预设的书写顺序，导致后写的样式反而先加载
用 specificity 工具可视化真实权重
别靠脑子算三位数（id/类/标签），用浏览器开发者工具的“Computed”面板点开某条样式，看右侧是否标有 specificity: 0,1,1,1 —— 这才是真实生效的权重。更关键的是检查“Origin”列：是来自 user agent stylesheet、style attribute 还是某个 media query，这些都参与层叠排序。
- Chrome DevTools → Elements → 右侧 Styles 面板 → 悬停某条 CSS 规则，出现小箭头图标，点击可跳转到源码位置
- Firefox 的 Inspector 里右键某条样式 → “Show Rule Info”，直接显示 specificity 值和层叠来源
- 避免手动写
div#header.navbar ul li a:hover这类高权重选择器，它会锁死后续覆盖路径；改用语义化类名 + 单一职责原则，比如.nav-link.is-active
用 contain: layout paint 主动隔离层叠上下文
当一组组件需要完全独立于外部样式的干扰（比如弹窗、Tooltip、第三方 Widget），与其拼命提高选择器权重，不如用 CSS Containment 切断继承和层叠污染。它比 z-index 更底层，能阻止浏览器把该元素和祖先一起做层叠排序。
/* 在弹窗容器上设置 */
.modal-overlay {
contain: layout paint;
position: fixed;
z-index: 1000;
}-
contain: layout paint会让该元素成为独立的层叠上下文，其内部所有z-index都只在它内部生效 - 注意兼容性：
contain在 Safari 15.4+、Chrome 52+、Firefox 69+ 支持，IE 完全不支持 - 不要滥用：对滚动区域或动画频繁的元素加
contain: paint可能引发重绘性能问题
PostCSS 插件自动检测冲突层级
人工维护样式层级容易遗漏，尤其在多人协作项目中。用 postcss-zindex 或 postcss-specificity 在构建时扫描问题：
立即学习“前端免费学习笔记（深入）”；
/* postcss.config.js */
module.exports = {
plugins: [
require('postcss-zindex')({
warn: true, // 对 z-index > 999 的规则发 warning
max: 999
})
]
}-
postcss-zindex会标记出未形成层叠上下文却用了z-index的元素（如z-index写在static定位元素上） -
postcss-specificity可配置阈值，当某个选择器权重超过0,0,2,0（即两个类名）时自动报错，强制拆分组件样式 - 这类插件必须配合构建流程运行，单独写 CSS 文件不会触发检查
真正卡住的往往不是“怎么提高优先级”，而是没意识到某个 transform、opacity < 1 或 will-change 已经悄悄创建了新的层叠上下文，把本该浮在顶层的元素关进了子牢房。
