:where()单独使用无效，因其权重恒为0-0-0，低于浏览器默认样式（0-0-1）和第三方高权重要求（如.ant-btn:focus为0-0-2），必须配合外层命名空间（如.my-app :where(button)）提权才生效。
:where() 本身不解决样式冲突，它只提供零权重的“起点”；真要覆盖第三方样式，必须靠外层容器选择器提权，否则规则压根不会生效。
为什么单独写 :where(.btn) 完全无效
浏览器给 :where(.btn) 算出的 specificity 是 0-0-0，比一个普通 button 标签选择器（0-0-1）还低，更别说第三方库常用的 .ant-btn-primary:focus（0-0-2）或 #header .btn（0-1-1）。它连浏览器默认样式都盖不过，自然不会出现在 DevTools 的 Computed 面板里。
常见错误现象：在全局 CSS 里写了 :where(.el-button) { padding: 8px; }，刷新后毫无反应——不是语法错，是权重太低，被直接跳过层叠计算了。
- 它不降低已有类名的权重，只是构造一个全新、零权的规则
- 括号里塞 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)，把控制权交给组件自身作用域。
哪些地方容易被忽略导致失效
最常被忽视的是兼容性断层和伪元素盲区：
- Safari 15.0–15.3 对多选项
:where(.a, .b, .c)有解析 bug，可能漏掉最后一个选择器；上线前必须实测，或拆成多个单条规则 -
:where()不作用于伪元素（如::placeholder、::-webkit-search-cancel-button），UA 样式仍可能压倒它 - 它无法穿透 Shadow DOM 或多数 CSS-in-JS 的作用域边界，
:where()写在父组件里，对子组件 shadow root 内的元素无效 - 别指望它绕过
!important—— 第三方用了color: red !important，你写:where(.btn) { color: blue !important; }也白搭
什么时候该选 :where() 而不是 :is()
看你要不要参与层叠竞争：:is() 取括号内最高权重（比如 :is(.foo, #bar) 权重 = 1-0-0），适合增强交互态；:where() 恒为 0-0-0，只适合做基线归零。
安全用法示例：
:where(button, input, select, textarea, a) {
margin: 0;
padding: 0;
border: none;
outline: none;
background: transparent;
color: inherit;
font: inherit;
}
关键约束：
- 只用元素选择器或布尔属性（如
[disabled]），避免引入类名导致“归零失败” - 不搭配
all: unset—— 它会切断inherit链，让文字变黑、字体丢失 - 避开伪元素，它们不在
:where()作用范围内
真正难的不是写对 :where()，而是判断哪一层该留权、哪一层该放权——外层没权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。这个分寸感，得靠 DevTools 里反复看 Computed 的 specificity 数值来练出来。
