交集选择器通过叠加类选择器数量提升权重，如 .btn.primary 权重为 0,0,2,0，高于单类 0,0,1,0 或标签 0,0,0,1；但无法超越 ID（0,1,0,0），且匹配失败时权重无效。
交集选择器如何提升CSS权重
交集选择器（如 .btn.primary）本身不“主动提升”权重，而是通过叠加类选择器数量，使整体特异性（specificity）数值变高。每个类名贡献 0,0,1,0，两个类就是 0,0,2,0，高于单个类的 0,0,1,0，也高于标签选择器 0,0,0,1。
- 权重是纯数学叠加，不是语义增强：写成
.primary.btn和.btn.primary权重完全一样，顺序无关 - 不要误以为加类就能压倒 ID：一个 ID 选择器（
0,1,0,0）仍远高于任意多个类组合（比如.a.b.c.d.e仍是0,0,5,0） - 如果目标元素本就只有
class="btn"，你却写了.btn.primary，样式根本不会生效——交集匹配失败，权重再高也没用
.btn.primary 和 button.primary 哪个权重更高
button.primary 权重是 0,0,1,1（1 个类 + 1 个标签），.btn.primary 是 0,0,2,0。后者更高。但差别仅在理论层面，实际项目中更应关注可维护性。
- 加标签前缀（如
button.btn）会限制复用：以后想把.btn用在a或div上就得改 CSS 或加新规则 - 纯类交集（
.btn.primary）更符合原子化/模块化思路，也方便 BEM 或 utility-first 实践 - 权重差 1 点在绝大多数场景下无感知；真正引发冲突的往往是规则来源（内联 style、!important、加载顺序）而非这点微小差异
为什么交集选择器常被误认为“能解决覆盖问题”
开发者看到 .input.error:focus 生效了，就以为是它“赢了”其他规则，其实只是因为它的 specificity 是 0,0,3,0（.input、.error、:focus 各算一份），比 .input 的 0,0,1,0 高。但这掩盖了一个关键事实：
- 伪类（如
:focus、:hover）和类选择器同级权重，都算0,0,1,0，不是“更高级” - 如果另一个地方用了
input[type="text"].error，权重也是0,0,2,1，可能反超 - 最危险的是依赖交集“强行提权”去覆盖第三方库样式——一旦库升级、加了 ID 或 !important，你的交集规则立刻失效
真正容易被忽略的点
交集选择器匹配的是“同一元素同时拥有这些类”，不是状态机。它不感知添加/移除顺序，也不保证样式响应及时性。比如 JavaScript 动态操作 el.classList 时漏掉空格、或用 className += "loading" 导致类名粘连成 "disabledloading"，交集就断了——此时权重再高也匹配不到元素。
立即学习“前端免费学习笔记（深入）”；
