:where()优先级恒为(0,0,0)是因为浏览器解析时直接跳过其括号内所有选择器的特异性计算，仅负责匹配而不参与层叠竞争；正确用法是仅包裹需归零的部分（如.btn:where([disabled])），外层选择器提供权重支撑，整条规则才生效。
:where() 的优先级为什么恒为 0-0-0
它不是“降低”优先级，而是浏览器在解析时直接跳过括号内所有选择器的特异性计算——:where(.btn)、:where(#header .item:hover)、:where(div p [data-id])，无论里面多复杂，整条规则的 specificity 始终是 (0, 0, 0)。这不是 bug，是规范定义的行为：它只负责匹配，不参与层叠竞争。
:where() 写错位置就彻底失效
常见错误是把整个目标选择器包进去，比如 :where(.ant-btn[disabled])。这会让整条规则权重归零，连基础样式都可能被清掉；正确写法是只包裹需要“去争权”的部分：.my-app :where([disabled]) 或 .btn:where([disabled])，外层选择器（如 .btn）提供权重支撑，内部归零但整体生效。
- ✅ 推荐：
.card :where(.title, .subtitle)——.card贡献权重，内部安全归零 - ❌ 避免：
:where(.card .title)—— 含组合器，整条规则权重为 0，极易被覆盖 - ⚠️ 注意：
:where()不能嵌套，:where(:where(.a))第二层无效
哪些场景真正适合用 :where()
它不是万能覆盖器，而是“基线归零工具”，只在你明确希望某类样式默认存在、但又必须让业务层无压力接管时才启用。
- 清除表单控件默认外观：
:where(button, input, select, textarea)，只配元素或布尔属性（如[disabled]），不混入类名 - 统一链接/列表/段落基础间距：
:where(a, ul, ol, p)，避免用all: unset破坏继承链 - 配合
@layer reset做兜底：@layer reset { :where(h1, h2) { margin: 0; } }，确保优先执行 - 第三方组件穿透覆盖：
.third-party-component :where(button)，把控制权交给组件自身作用域，而非和它同级硬刚
兼容性与上线前必须检查的点
:where() 在 Chrome 105+、Firefox 103+、Safari 15.4+ 原生支持，但旧版 Safari（如 15.2）对它的解析不稳定，可能整条规则静默失效——CSS.supports('selector(:where(a))') 返回 true，不代表渲染正确。必须手动 fallback：
h1, h2, h3 { margin: 0; }
@layer reset {
:where(h1, h2, h3) { margin: 0; }
}
别依赖 @supports selector(:where(*)) 做兜底，老浏览器会直接跳过整条规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
