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