:where(.btn)无效是因为其特异性为0-0-0，低于普通标签选择器（0-0-1）和类选择器（0-0-2），无法覆盖默认样式或第三方样式；必须配合外层有权重的选择器（如.my-app :where(button)）才生效。
为什么单独写 :where(.btn) 完全没效果
浏览器给 :where(.btn) 算出的 specificity 是 0-0-0，比一个普通 button 标签选择器（0-0-1）还低，更别说第三方库常用的 .ant-btn-primary:focus（0-0-2）。它连浏览器默认样式都盖不过，自然不会出现在 DevTools 的 Computed 面板里。
常见错误现象：在全局 CSS 里写了 :where(.el-button) { padding: 8px; }，刷新后毫无反应——不是语法错，是权重太低，被直接跳过层叠计算了。
-
:where()不降低已有类名的权重，只是构造一个全新、零权的规则 - 括号里塞 ID 或属性选择器（如
:where(#nav, [data-id])）也没用，整条还是 0-0-0 - 搭配
!important依然无效：权重为 0 的声明加!important，仍会被任何非零权重规则覆盖
:where() 必须配合外层命名空间才真正可用
真正起作用的是外层那个有实际权重的选择器，:where() 只负责把括号内部分“归零”，避免污染整体权重。例如 .my-app :where(button, input) 的权重来自 .my-app（0-0-1），内部归零但整体生效。
典型可用场景：
立即学习“前端免费学习笔记（深入）”；
- 在 Vue / React 组件 scoped style 中穿透匹配第三方类：
.my-component :where(.ant-input) - 给富文本内容加兜底约束：
.post-content :where(img, iframe) - 重置设计系统中所有表单控件基础外观：
.ui-kit :where(input, select, textarea)
反例：:where(.third-party-component button)——这等于主动放弃外层权重，整条规则变成空气；正确写法是 .third-party-component :where(button)，把控制权交给组件自身作用域。
哪些选择器能放进 :where() 括号里而不破功
:where() 括号内只接受简单选择器列表，且必须保证不引入额外权重。一旦出现类名、ID 或复合选择器，就可能让整条规则失效或权重回升。
- ✅ 安全写法：
:where(button, input, [disabled], h1, h2)—— 元素、布尔属性选择器、纯标签 - ❌ 破功写法：
:where(.btn, div.class)—— 类名一出现，权重立刻失效 - ⚠️ 谨慎使用：
:where([data-role="primary"])—— 带值的属性选择器容易因空格或引号解析异常，尤其在 Safari 15.2 下 - ? 禁止嵌套：
:where(:hover)、:where(.a::before)、:where(:is(.x))均非法，整条规则会被浏览器丢弃
构建时和兼容性最容易被忽略的坑
:where() 不是写完就能跑通的语法糖。它在构建链路和目标环境里都有明确断层。
- Vite / Webpack 若启用了 CSS 压缩（如 cssnano），可能误删
:where()—— 需确认插件配置保留该伪类 - Safari 15.0–15.3 存在解析 bug：
:where(.a, .b, .c)可能漏掉最后一个选择器，上线前务必实测多选择器行为 - IE 完全不支持；旧版 Edge（≤18）、iOS 15.2 及更早版本会静默忽略整条规则，需用
@supports selector(:where(*))包裹降级 -
:where(*)和* {}不等价：:where(*)权重为 0-0-0，但匹配逻辑相同；而* {}触发全量继承重绘，性能更差
真正难调试的不是语法错误，而是权重为 0 的规则在 DevTools 里排序靠后，出问题时第一反应根本不会想到它——尤其是当它被包裹在媒体查询或 scoped style 里时。
