CSS :where() 怎样降低组件选择器的优先级

组件样式经常遇到一个矛盾：为了准确选中内部元素，默认规则写得很长；业务方想换一个颜色或间距，却只能继续堆选择器，最后甚至加上 !important。CSS :where() 适合处理这个问题：它保留选择器的匹配范围，但自身和括号内的选择器都按 0-0-0 计算。括号外的选择器仍然正常计分，所以它不是“整条规则没有优先级”，而是把最容易变重的部分归零。

把组件内部路径放进 :where()，可以让组件默认样式保持可读和精确，同时让调用方用一个普通类选择器就能覆盖；但来源、级联层、!important 和源码顺序仍然优先参与判断。

先算清 :where() 到底贡献多少优先级

CSS 优先级通常写成 A-B-C：ID、类/属性/伪类、类型选择器分别计数。:where() 的特殊点是无论括号里放一个类、一个 ID，还是一串复杂选择器，整个函数都替换成 0-0-0。例如：

/* 中文注释：组件路径只负责限定匹配范围，不把内部层级变成高优先级 */
:where(#checkout-panel form.summary input[name="coupon"]) {
  border-color: #cbd5e1;
}

/* 中文注释：规则外的 .is-error 仍贡献一个类选择器 */
.is-error:where(#checkout-panel form.summary input[name="coupon"]) {
  border-color: #dc2626;
}

第一条的优先级是 0-0-0，第二条是 0-1-0，因为只有 .is-error 在函数外。于是 input 这样的类型选择器，甚至一个普通组件类，都有机会覆盖第一条规则。注意，:where() 仍必须匹配元素；“零优先级”不等于“永远不生效”。

把组件默认样式留出覆盖入口

第三方组件或团队基础样式更适合从低优先级开始设计。可以把“组件根节点到内部元素”的路径放进 :where()，把真正希望调用方调整的状态类留在外面：

/* 中文注释：默认按钮只服务于组件内部结构，保持最低覆盖成本 */
:where(.ui-card) .title,
:where(.ui-card) .action {
  color: #334155;
  padding: 8px 12px;
}

/* 中文注释：业务页面只增加一个类，就能覆盖默认颜色 */
.order-page .ui-card .title {
  color: #0f766e;
}

/* 中文注释：状态类放在 :where() 外，表达有意提高的状态权重 */
.is-disabled:where(.ui-card .action) {
  opacity: 0.55;
  pointer-events: none;
}

这里第一组默认规则分别是 0-0-0 和 0-0-0，业务规则 .order-page .ui-card .title 是 0-3-0，覆盖关系很直观。若组件使用了级联层，还要先比较层的顺序；同层同来源时，再比较优先级，最后才看源码出现顺序。

对比 :is()、普通伪类与 !important

:is() 的目标是复用匹配条件，但它会取参数列表中最高的优先级；:where() 才是“匹配条件不增加权重”的版本。比如 :is(.card, #hero) 可能按 ID 级别计分，改成 :where(.card, #hero) 后则归零。两者不能只按名称替换，要先确认组件是否需要保留高权重。

普通伪类如 :hover、:focus-visible 会计入类/伪类那一档。可以把状态写在 :where() 外部来明确提高权重，也可以配合级联层管理默认样式与覆盖样式。不要为了压过一个设计过重的选择器就立刻添加 !important；它会改变正常声明的层叠优先级，后续维护通常更难。

用优先级表定位覆盖失败

当覆盖仍不生效，按下面顺序排查，比继续加选择器更快：

最终可以把组件默认规则控制在 :where() 内，把主题、状态或业务差异写在外面。这样做的结果不是“所有覆盖都无条件成功”，而是让覆盖关系回到可计算、可解释的 CSS 层叠规则中。

常见问题

问：`:where()` 里的 ID 真的完全不算优先级吗？
答：对选择器优先级计算来说是的，函数本身和参数都按 0-0-0 处理，但它仍然按参数匹配元素。

问：`:where()` 能解决所有样式覆盖问题吗？
答：不能。不同来源、级联层、重要声明、继承和未命中规则都可能决定最终值；它主要降低普通默认规则的覆盖成本。