:where()生成零权重选择器，其括号内所有简单选择器对外贡献权重恒为0，不参与累加；与:is()取最高权重不同，它彻底消除权重影响，适用于无侵入式样式重置。
什么是:where()产生的零权重选择器
:where()本身不降低已有选择器的权重，而是让括号内所有简单选择器（如div、.btn、[disabled]）在组合时**不参与权重累加**。它生成的是“权重为 0”的完整选择器，不是“权重被清零”。这意味着:where(.a.b) + div的权重仍是 0-0-2 + 0-0-1 = 0-0-3？错——整个:where(.a.b)部分算作 0，所以最终是 0-0-1。
- 单个
:where()包裹的选择器，无论里面多复杂，对外贡献权重始终为 0 -
:where()不能嵌套，写:where(:where(.x))会报语法错误 - 它不影响伪元素、组合符或后续连接的选择器权重，只“封印”括号内的部分
- 浏览器兼容性：Chrome 105+、Firefox 98+、Safari 15.4+，旧版需用
:is()降级（但:is()有权重）
:where()和:is()在权重上的关键区别
这是最常混淆的点。:is()会取括号内所有选择器中**最高权重**作为整个:is()的权重；而:where()永远返回 0。
code {
/* :is(.foo, #bar) → 权重取 #bar 的 0-1-0 → 整体是 0-1-0 */
:is(.foo, #bar) { color: red; }
/* :where(.foo, #bar) → 无视 #bar，整体权重 0-0-0 */
:where(.foo, #bar) { color: blue; }
}
- 如果同时存在两条规则，
:where()写的那条永远会被普通类名、ID 或属性选择器覆盖 -
:where()适合写“默认样式兜底”，比如重置第三方组件的默认边距：:where(button, input, select) { margin: 0; } - 别用
:where()试图“提高优先级”，它只做一件事：让选择器彻底失去话语权
哪些场景必须用:where()而不是直接写低权重选择器
你可能会想：“我直接写div不也是 0-0-1？何必套一层？”问题在于，单独写div仍比*[hidden]权重高（后者是 0-0-1），但:where(div, *[hidden])把两者都压到 0，才能真正实现“无侵入式归一化”。
- 统一重置第三方 UI 库的默认样式（如
headless-ui或shadcn生成的元素）：:where([role="dialog"] > *, [role="alert"] > *) { all: unset; } - 为 CSS 框架提供“安全覆盖层”，避免意外影响业务样式：
:where(.prose p, .prose li) { margin-top: 0.5em; } - 编写可被任意项目安全引入的 CSS Reset 片段，不破坏现有权重逻辑
- 注意：
:where()不能用于@keyframes或@font-face等非选择器上下文
容易忽略的坑：伪类与组合符在:where()里的行为
:where()内部支持几乎所有伪类（:hover、:focus-within、:nth-child()），但它们**不改变外部权重**；而组合符（+、~、>）必须写在:where()外面，否则无效。
/* ✅ 正确：组合符在外，:where 内只放简单选择器 */
:where(button, input) + span { opacity: 0.7; }
<p>/<em> ❌ 错误：> 在 :where 内部，解析失败 </em>/
:where(button > span) { ... }</p><p>/<em> ✅ 可以用 :where 包裹带伪类的选择器，但伪类本身不增加权重 </em>/
:where(a:hover, a:visited) { text-decoration: none; }</p>
-
:where()里不能出现 ID 选择器以外的“高权重项”——其实可以，只是它照样归零，比如:where(#app, .x, div)全部变 0 - 不要指望
:where()能绕过!important，它只管选择器权重，不管声明优先级 - 构建工具（如 PostCSS）若未启用现代 CSS 解析，可能直接丢弃
:where()规则，上线前务必检查生成结果
实际用起来最麻烦的不是语法，而是得反复问自己：这里真的需要“完全零权重”吗？还是只是想少写几个类名？一旦选错，调试时你会发现样式莫名其妙被覆盖，而控制台里连权重数值都看不出端倪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
