:where() 的权重恒为 0-0-0，因其被 CSS 规范定义为“零权重构造器”，不参与 specificity 计算；括号内选择器无论多高权重均被清零，且必须依赖外层选择器提供实际权重才能生效。
为什么 :where() 的权重恒为 0-0-0
因为 CSS 规范明确将 :where() 定义为“零权重构造器”——它不参与 specificity 计算，括号内无论写 #header、.btn:hover 还是 div[role="button"]，整条规则的权重都固定为 0-0-0。这不是浏览器实现差异，而是标准行为。
:where() 和 :is() 的权重计算逻辑完全不同
:is() 取括号内**最高权重的选择器**作为整个伪类的权重；:where() 则直接清零，不取任何值。
-
:is(.a, #b, [data-id])权重 =#b的1-0-0 -
:where(.a, #b, [data-id])权重 =0-0-0（哪怕里面塞了 ID） - 写
:where(button:focus)，权重仍是0-0-0，不是0-0-2
单独写 :where(.btn) 为什么完全无效
它连浏览器默认样式都盖不过——button 标签选择器权重是 0-0-1，而 :where(.btn) 是 0-0-0，CSS 引擎在层叠计算时直接跳过这条规则。
- DevTools 的 Computed 面板里根本不会出现它
- 不是语法错，也不是不支持，是权重太低被静默丢弃
- 常见现象：
:where(.ant-btn) { color: red; }刷新后按钮颜色不变，因为 Ant Design 的.ant-btn权重是0-1-0
真正起作用的从来不是 :where() 本身
:where() 不提权，只归零；真正提供权重的是它前面那个外层选择器。
- ✅
.my-app :where(button, input)→ 权重来自.my-app（0-0-1） - ✅
article :where(h1, h2)→ 权重来自article（0-0-1） - ❌
:where(.my-app button)→ 整条规则权重0-0-0，等于没写 - ❌
:where(#header) button→:where(#header)白贡献权重，button单独匹配，但没上下文约束
真正容易被忽略的点是：你写的每一条 :where() 规则，都必须依赖一个**稳定、可控、业务专属的外层选择器**才能落地。没有它，:where() 就是空气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
