:where(.class)单独使用无效，因其生成0-0-0权重，低于元素默认样式；必须配合外层选择器提权（如.my-app :where(.ant-btn)）才能生效。
直接写 :where(.class) 会失效，它不降低已有权重，而是构造一条权重为 0-0-0 的新规则；真正生效必须靠外层选择器提权，比如 .my-app :where(.ant-btn)。
为什么单独用 :where() 样式根本不起作用
浏览器计算 specificity 时，:where() 括号内所有内容都不贡献数值。写 :where(.btn) 得到的是 0-0-0 权重，比 button（0-0-1）还低，连 UA 默认样式都盖不住——不是没匹配，是太轻，被后续任意一个带 class 的规则反向覆盖。
- 常见错误：
:where(.ant-btn) { border-radius: 4px; }→ 规则存在但几乎永不生效 - 正确姿势：
.page-container :where(.ant-btn)→.page-container提供 0-0-1，内部归零后整体仍有效 - 更安全的锚点：优先用语义容器（如
article、section）或主题 class（如.theme-light），避免用泛滥的body
:where() 里能放什么、不能放什么
括号内只接受简单选择器，且一旦出错，整条规则会被浏览器静默丢弃，DevTools 里看不到、控制台也不报错。
- ✅ 安全项：元素名（
button）、类名（.btn）、属性选择器（[disabled]）、伪类（:hover） - ❌ 禁止项：伪元素（
::before）、嵌套:not()或:is()、:nth-child()等需计算的选择器 - ⚠️ 多选项陷阱：
:where(.a, .b, .c)在 Safari 15.0–15.3 会漏掉最后一个，上线前必须实测，或拆成三条独立规则
和第三方组件库打架时怎么写才真有用
目标不是“赢过”高权重规则，而是让自己的基础样式先稳稳上场，再留给业务层轻松覆盖。
- 顺序必须严格：
node_modules/antd/dist/reset.css→ 你的reset-where.css→ 业务page.module.css - 别包整个第三方选择器：
:where(.ant-btn-primary)是错的；应拆解：.my-page :where(.ant-btn)[disabled] - 无法穿透
!important：对方写了color: red !important，你用:where()包也无效 - 状态类要分开处理：
.theme-dark :where(.ant-btn):focus中，:focus仍算 0-0-1，整条权重变成 0-0-1，不是 0-0-0
构建和兼容性最容易被忽略的三点
语法对了，不代表线上能跑通。旧版 Safari 和构建工具常默默搞破坏。
- CSS 压缩插件（如 cssnano）可能误删
:where()，确认配置中discardUnused: false或显式保留该伪类 -
CSS.supports('selector(:where(a))')返回true不代表渲染正常——Safari 15.2 可能静默失败，必须在真实设备上验证 - Shadow DOM 和 CSS-in-JS 作用域内，
:where()无法穿透边界，局部重置只在当前 scope 生效
真正难的不是写出 :where()，而是判断哪一层该留权、哪一层该放权：外层没权，里面再清零也是空气；外层权太高，又违背“便于覆盖”的初衷。这个分寸，得靠 DevTools 的 Computed 面板里反复看 specificity 数值来校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
