:where()括号内选择器权重恒为0-0-0，是规范强制清零而非降低；必须配合外层有权重的选择器（如.my-app或article）才能生效，单独使用或错误包裹第三方类名会导致样式失效。
为什么 :where() 括号里的选择器完全不参与权重计算
因为规范明确要求：:where() 内部所有选择器的特异性（specificity）被强制设为 (0, 0, 0)，浏览器在层叠计算时直接跳过这部分权重贡献。它不是“降低”，而是“清零”——哪怕你写 :where(#header .nav a:hover[disabled])，整条规则权重仍是 0-0-0，和 * 同级。
:where() 和 :is() 的权重行为差异必须分清
这是最容易混淆的点：
-
:is(.a, #b, div)的权重取括号内最高者（这里是#b的0-1-0） -
:where(.a, #b, div)的权重永远是0-0-0，不管里面有没有 ID 或嵌套 - 误用
:where()去替代:is()，会导致样式突然失效——不是语法错，是权重太轻，被后面任意一个带 class 的规则盖掉
哪些写法会让 :where() 实际失效
常见翻车场景不是语法错误，而是语义误用：
- 把整个目标选择器包进去：
:where(.ant-btn[disabled])→ 整条规则权重0-0-0，连基础颜色都可能丢 - 外层没提供可靠权重起点：
:where(button)单独使用 → 权重为 0，大概率输给浏览器默认button样式或后续任何 class 规则 - 在旧版 Safari（如 15.2）中使用 →
CSS.supports('selector(:where(a))')可能返回true，但渲染静默失败，DevTools 里看不到这条规则 - 试图用它控制条件逻辑：
:where(.dark) button→ 它不判断 .dark 是否在根上，只要页面任意位置有该 class 就匹配，无法做暗色模式开关
真正有效的 :where() 用法长什么样
它只在“外层提权 + 内层归零”结构下才可落地：
-
.my-app :where(button, input, select)→.my-app贡献0-1-0，内部元素归零，整体生效且易覆盖 -
article :where(h1, h2, h3)→ 利用语义容器锚定上下文，避免和全局标题规则冲突 -
.btn:where([disabled])→.btn保持权重，[disabled]不加权，既精准又不抢戏 - 搭配
@layer reset使用更稳，但:where()本身不提供层级语义，只是归零工具
关键不在“怎么写对”，而在“在哪写、和谁一起写”——它必须出现在 reset 或 base 层靠前位置，且外层容器 class 必须稳定、业务专属、不被第三方污染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
