一眼看出权重相等而非被压垮的关键是：Styles面板中规则未被划掉但未出现在Computed面板，且specificity值完全相同（如均为0,0,2,0），生效的是同权重下CSS源码中位置更靠后的规则。
怎么一眼看出是权重相等而非被压垮？
权重相等时，Styles 面板里你的规则不会被划掉，但也不生效——它就安静地躺在那儿，值是对的，却没出现在 Computed 面板里。这时候不是“输给了谁”，而是“被后写的同权重规则盖掉了”。关键信号是：specificity 值完全一样（比如都是 0,0,2,0），但你的规则在 Styles 里排得更靠前，而生效的是后面那条。
用开发者工具快速定位“谁在你后面”
在 Styles 面板中，逐行向上滚动，重点看和你规则 specificity 相同的其他样式：
- 每条样式右侧都标着来源文件和行号，点击就能跳转，立刻看到上下文
- 注意是否来自第三方库（如
ant-design.css或bootstrap.min.css），它们常把 CSS 放在<head>最后 - 检查是否有
@import引入的样式表——它解析晚、插入位置不可控，容易意外“插队” - Vue 的
<style scoped>和 React 的 CSS Modules 生成的选择器虽权重相同，但因属性哈希不同，实际是两个独立选择器，谁在 HTML 中<link>或<style>标签里出现得更靠后，谁赢
为什么改了 class 还不生效？常见同权重陷阱
你以为加个类就安全了，但可能早被另一组同权重的类锁死：
-
.btn-primary（0,0,1,0） vsbutton.btn（0,0,2,1）→ 后者权重更高，不属同权 -
.card .title（0,0,2,0） vs.modal-header h2（0,0,1,1）→ 权重不同，也不属同权 - 真正同权的是：
.user-input.radio-inputs和.form-control:focus，都是0,0,2,0；这时谁在 CSS 文件里写得靠后，谁生效 - 动态插入的
<style>（比如 JS 框架注入的）默认插入到<head>末尾，天然比静态<link>靠后，哪怕你本地文件写得早
如何稳住自己的规则不被“后发制人”？
不靠堆权重，也不靠 !important，而是控制加载顺序和作用域：
立即学习“前端免费学习笔记（深入）”；
- 把自定义 CSS 的
<link>放在所有第三方库之后，确保 DOM 解析时它最后加载 - 避免在组件内用
<style>块写覆盖逻辑，改用全局样式表统一管理 - Vue 项目中慎用
:deep()包裹整个规则——它会提升子选择器权重，反而引发新冲突；只对必要节点用，如:deep(.el-button) - 构建工具（Vite/Webpack）输出的 CSS 文件名带 hash，但 HTML 中引用的仍是旧路径？那根本不是权重问题，是文件压根没加载——先去 Network 面板确认状态码是
200
真正难的不是算出权重，而是看清谁和你权重一样、又悄悄排在你后面。每次怀疑同权覆盖，先点开 Styles 面板顶部的“all”过滤器，把所有规则摊开，从下往上扫一遍 specificity 值相同的条目——答案通常就在那三行之内。
