如何使用CSS:where降低组件样式覆盖难度

直接写: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”里，因为它排序靠后、被跳过计算。

1. 单独用 :where() 等价于写 *，但比通配符还弱：不继承、不兜底、不参与层叠
2. 第三方组件如 Ant Design 的 .ant-btn[disabled] 权重是 0-2-1，你用 :where(.ant-btn[disabled]) 反而变成 0-0-0，彻底失去竞争资格
3. Safari 15.2 及更早版本会静默丢弃整条规则，控制台无提示，DevTools 里也看不到这条样式

.theme-root :where(.ant-btn) 才是有效写法

外层 .theme-root 提供稳定权重（0-1-0），括号内归零，整体仍是 0-1-0 —— 足够压过 UA 样式，又不会高到让业务层覆盖困难。

1. 必须把业务专属 class（如 .theme-root、.app-shell）放在 :where() 外面，且不能是 ID 或嵌套过深的路径
2. :where() 括号里只放你要“让权”的部分：类名（.ant-btn）、属性（[disabled]）、伪类（:hover），别塞组合器（如 .ant-btn .icon）
3. 多个目标用逗号分隔：.theme-root :where(button, [role="button"], .ant-btn)，但 Safari 15.0–15.3 有 bug，可能漏掉最后一个，上线前必须实测

哪些地方写了 :where() 反而更难调试

它在 DevTools 里排在最底下，权重为 0 的规则常被忽略；一旦出问题，第一反应不是它，而是去查更高权的规则，结果绕一大圈才发现是 :where() 规则被后续同名 class 反向覆盖了。

1. 别用 :where(.grid) { display: grid; } 这类关键布局规则——权重为 0，漏写 class 就塌布局，且很难定位
2. 第三方用了 !important（比如 color: red !important），:where() 完全无效，别白费力气包它
3. 伪元素（::placeholder、::-webkit-search-cancel-button）不能放进 :where()，浏览器直接忽略整条规则
4. 和 @layer reset 搭配更稳，但 :where() 本身不提供层级语义，只是“基线归零工具”

真正决定覆盖成败的不是语法，是加载顺序和锚点选择

就算写对了 .theme-root :where(.ant-btn)，如果它在第三方 CSS 之前加载，照样被覆盖；如果锚点选成 body :where(.ant-btn)，权重虽有但太低，不如直接用组件所在容器（比如 .modal-content :where(button)）。

1. 规则必须放在第三方 CSS 之后、业务样式之前，否则根本进不了层叠流
2. 锚点越具体越好：.user-profile-card :where(button) 比 .app-root :where(button) 更安全，避免意外影响其他区域
3. 别指望 :where() 解决所有覆盖问题——它只负责“清权”，不解决 !important、Shadow DOM 隔离、CSS-in-JS 动态注入等深层限制