:where()的特异性恒为(0,0,0)，不参与层叠计算，仅作匹配开关；必须搭配外层有权重的选择器才能生效，单独使用则整条规则失效。
:where() 的优先级永远是 (0, 0, 0)，不是因为它“降低了”某个选择器的权重，而是浏览器在解析时直接跳过括号内所有内容的特异性计算——它不参与层叠竞争，只负责匹配。单独写 :where(.btn) 就等于写了一条权重为零的规则，连原生 button 标签（权重 (0, 0, 1)）都盖不过。
为什么:where()括号里塞啥都归零
浏览器规范明确要求：:where() 整个函数的 specificity 恒为 (0, 0, 0)，无论里面是 .a.b.c:hover、#header .nav li 还是 [data-id][disabled]。这不是 bug，是设计使然——它只做“匹配开关”，不抢“样式话语权”。一旦你误写成 :where(.third-party-component button)，整条规则就变成空气，DevTools 的 Computed 面板里根本不会出现它。
:where()必须搭配外层选择器才生效
真正起作用的是外层那个有实际权重的选择器，:where() 只负责把括号内部分“静音”。没有锚点，它就是无效代码。
-
✅ 安全写法：
.my-app :where(button, input, [disabled])—— 权重来自.my-app（(0, 0, 1)），内部归零但整体生效 -
✅ 语义提权：
article :where(h1, h2, p)—— 利用 HTML 语义容器，比用body更稳，避免和全局 reset 冲突 -
❌ 失效写法：
:where(.ui-button)或:where(div .card)—— 整条规则权重为 0，匹配成功也进不了层叠队列
哪些场景真适合用:where()
它不是万能覆盖器，而是“基线归零工具”，只在你明确希望某类样式默认存在、但又必须让业务层无压力接管时启用。
立即学习“前端免费学习笔记（深入）”；
- 统一表单控件基础外观：
:where(button, input, select, textarea)，只配元素或布尔属性（如[disabled]），不混入类名 - 富文本内容兜底约束：
.post-content :where(img, iframe, a)，防止外部样式意外破坏排版 - 配合
@layer reset做现代重置：@layer reset { :where(h1, h2) { margin: 0; } }，确保优先执行 - 第三方组件穿透控制：
.ant-design-wrapper :where(button, .ant-btn)—— 注意：是外层加 wrapper，不是把.ant-btn塞进:where()
上线前最容易被忽略的三件事
语法对了 ≠ 渲染正常。旧版 Safari（如 15.2）、构建工具、CSS 压缩插件都可能让它静默失效。
-
CSS.supports('selector(:where(a))')返回true不代表渲染正确——Safari 15.2 可能匹配失败且不报错 - cssnano 等压缩工具默认会删掉
:where()，需显式配置discardUnused: false或保留该伪类 -
:where(a:hover)在 Safari 15.3 及更早版本中可能触发InvalidSelectorError，hover 状态完全不生效
最常踩的坑不是不会写，而是忘了外层必须有个靠谱的锚点；最危险的错觉是以为把第三方类名整个包进去就能“压住它”，结果只是亲手交出了控制权。
