:where()可将选择器权重归零（0-0-0），是唯一原生降低CSS优先级的方案，适用于重置、默认样式及第三方库兼容场景，但需外层提权、避开伪元素与!important，且不兼容IE及旧版Safari。
直接用 :where() 可以让选择器权重归零，这是目前唯一能「主动降低」CSS优先级的原生方案。它不是用来抢覆盖权的，而是帮你从源头避免冲突——尤其适合重置、默认样式、第三方库兼容等场景。
为什么 :where() 能压低权重
浏览器计算 specificity 时，:where() 内部的选择器不贡献任何数值。比如 .btn 权重是 0,0,1,0；而 :where(.btn) 的权重是 0,0,0,0 —— 和通配符 * 同级，比任何类名都低。
- 它不改变样式逻辑，只改权重：声明依然生效，只是更容易被后续规则覆盖
- 支持嵌套和组合：
:where(.header) h1中，.header那部分权重归零，但h1仍算 1 - 不能包含伪元素或
:nth-child()等不支持的选择器，否则整条规则失效
:where() 和 :is() 的关键区别
:is() 是“取最大权重”，:where() 是“全归零”。比如：
:is(.a, #b, div) { color: red; } /* 权重按 #b 算 → 0,1,0,0 */
:where(.a, #b, div) { color: blue; } /* 全部归零 → 0,0,0,0 */- 想写一个“默认按钮样式，但允许业务层轻松覆盖”，就用
:where(.btn) - 想写“任一标题都统一处理”，且不干扰已有规则，用
:where(h1, h2, h3) - 千万别混用：
:where(.btn):hover里:hover仍算 0,0,1,0，整条权重变成 0,0,1,0
实际覆盖场景：给第三方组件“松绑”
比如 Ant Design 的 .ant-btn 权重高（常带 .ant-btn-primary 这类复合类），你自己的 .my-btn 很难覆盖。这时可在全局 reset 阶段提前注入：
立即学习“前端免费学习笔记（深入）”；
:where(.ant-btn) {
font-family: var(--font-ui, system-ui);
border-radius: 6px;
}
:where(.ant-btn):focus {
outline: 2px solid #007bff;
}- 这些规则权重为 0,0,0,0，几乎不会挡路
- 业务组件再写
.my-page .ant-btn（权重 0,0,2,0）就能稳稳覆盖 - 注意顺序：必须放在第三方 CSS 之后、你的业务样式之前，否则连参与层叠的机会都没有
容易踩的坑
:where() 不是银弹。它解决的是“我写的默认样式太霸道”，而不是“我覆盖不了别人的高权重规则”。
- 它不能穿透
!important：对方用了color: red !important，你用:where()包裹也无效 - 不兼容 IE 和旧版 Safari（
- Webpack/Vite 构建时若启用了 CSS 压缩（如 cssnano），可能误删
:where()—— 确认插件配置保留该伪类 - 别试图用它绕过 scoped 或 CSS Modules 的作用域限制，它只影响权重，不改变作用域
真正难的从来不是怎么覆盖，而是判断该不该覆盖。用 :where() 降权的前提，是你已经决定把控制权交还给业务层——这比写十个 !important 更需要克制。
