CSS权重（Specificity）是浏览器用于决定样式优先级的数值规则，由a（内联）、b（ID）、c（类/属性/伪类）、d（元素/伪元素）四部分组成，从左到右优先级递减；提升权重应优先使用合法选择器如div.card、.card.card-override或.btn[disabled]，避免滥用ID和!important。
什么是CSS权重（Specificity）
CSS样式是否生效，不只看书写顺序，更关键的是选择器的权重。浏览器按一套固定规则计算每个选择器的权重值，数值高的样式会覆盖数值低的。比如 div#header .nav a 一定压过 .nav a，哪怕后者写在后面。
权重由四部分组成（a,b,c,d），从左到右优先级递减：
– a：内联样式（）计为 1
– b：ID选择器个数（如 #app）
– c：类、属性、伪类选择器个数（如 .btn、[type="submit"]、:hover）
– d：元素名、伪元素个数（如 div、::before）
怎么快速提高一个样式的权重
别急着加 !important，先看能否用合法选择器提升权重。常见有效做法：
- 把
.card改成div.card—— 增加一个元素名，c 不变但 d+1，权重微升 - 在已有类基础上叠加一个无实际作用的类，比如
class="card card-override"，再写.card.card-override { ... }—— c+1，安全且可维护 - 用属性选择器强化：
.btn[disabled]比单纯.btn权重高（c+1） - 避免滥用 ID：虽然
#submit-btn权重高（b=1），但复用性差，且后续极难被覆盖（需另一个 ID 或内联）
哪些操作看似提权实则无效或危险
有些写法看起来“更具体”，但对权重没影响，甚至埋下隐患：
-
div .card和.card权重一样（都是 c=1, d=0）—— 后代选择器不增加权重 -
.card.card不等于 c=2：重复类名只算一次，浏览器去重 -
!important虽能强制覆盖，但会破坏层叠逻辑；多个!important还得比权重，且无法被任何常规样式覆盖 - 用
body .card提权？可行但污染语义，且一旦组件挪到shadow DOM或其它上下文就失效
调试权重冲突的实用技巧
Chrome DevTools 里直接看哪个样式被划掉、为什么被覆盖，比手算权重更可靠：
立即学习“前端免费学习笔记（深入）”；
- 选中元素 → Styles 面板 → 被划掉的声明，悬停会显示「specificity: 0,1,1,1」之类
- 右键某条样式 → “Force element state” 可临时模拟
:hover等状态，观察权重变化 - 想验证某个选择器权重？打开 Console，运行
getComputedStyle(document.querySelector('.target')).cssText，再对比实际生效值
真正难缠的不是权重不够，而是样式来自不同来源（user agent stylesheet、reset.css、框架组件内联 style、CSS-in-JS 动态注入），它们的层叠顺序和权重共同起作用。盯住 DevTools 的 Styles 面板左侧来源路径，比死磕数字更省时间。
