直接写:where(.ant-btn)失效是因为其权重恒为0-0-0，连浏览器默认样式都压不住，必须搭配外层有权重的选择器（如.theme-root :where(.ant-btn)）才能生效，且需确保加载顺序在第三方CSS之后。
为什么直接写 :where(.ant-btn) 会失效
它权重是 0-0-0，连浏览器默认的 button 样式都压不住——不是没匹配上，是太轻了，后面随便一个 .my-page .ant-btn（权重 0-2-0）就把它盖掉。你写的圆角、边框根本不会出现在 DevTools 的“Computed”里，因为它排序靠后、被跳过计算。
- 单独用
:where()等价于写*，但比通配符还弱：不继承、不兜底、不参与层叠 - 第三方组件如 Ant Design 的
.ant-btn[disabled]权重是 0-2-1，你用:where(.ant-btn[disabled])反而变成 0-0-0，彻底失去竞争资格 - Safari 15.2 及更早版本会静默丢弃整条规则，控制台无提示，DevTools 里也看不到这条样式
.theme-root :where(.ant-btn) 才是有效写法
外层 .theme-root 提供稳定权重（0-1-0），括号内归零，整体仍是 0-1-0 —— 足够压过 UA 样式，又不会高到让业务层覆盖困难。
- 必须把业务专属 class（如
.theme-root、.app-shell）放在:where()外面，且不能是 ID 或嵌套过深的路径 -
:where()括号里只放你要“让权”的部分：类名（.ant-btn）、属性（[disabled]）、伪类（:hover），别塞组合器（如.ant-btn .icon） - 多个目标用逗号分隔：
.theme-root :where(button, [role="button"], .ant-btn)，但 Safari 15.0–15.3 有 bug，可能漏掉最后一个，上线前必须实测
哪些地方写了 :where() 反而更难调试
它在 DevTools 里排在最底下，权重为 0 的规则常被忽略；一旦出问题，第一反应不是它，而是去查更高权的规则，结果绕一大圈才发现是 :where() 规则被后续同名 class 反向覆盖了。
- 别用
:where(.grid) { display: grid; }这类关键布局规则——权重为 0，漏写 class 就塌布局，且很难定位 - 第三方用了
!important（比如color: red !important），:where()完全无效，别白费力气包它 - 伪元素（
::placeholder、::-webkit-search-cancel-button）不能放进:where()，浏览器直接忽略整条规则 - 和
@layer reset搭配更稳，但:where()本身不提供层级语义，只是“基线归零工具”
真正决定覆盖成败的不是语法，是加载顺序和锚点选择
就算写对了 .theme-root :where(.ant-btn)，如果它在第三方 CSS 之前加载，照样被覆盖；如果锚点选成 body :where(.ant-btn)，权重虽有但太低，不如直接用组件所在容器（比如 .modal-content :where(button)）。
立即学习“前端免费学习笔记（深入）”；
- 规则必须放在第三方 CSS 之后、业务样式之前，否则根本进不了层叠流
- 锚点越具体越好：
.user-profile-card :where(button)比.app-root :where(button)更安全，避免意外影响其他区域 - 别指望
:where()解决所有覆盖问题——它只负责“清权”，不解决!important、Shadow DOM 隔离、CSS-in-JS 动态注入等深层限制
