:where()让基础样式“不抢戏”是因为其括号内选择器特异性归零，整条规则权重恒为(0,0,0,0)，作用是“让位”而非“赢”；需正确包裹需降权部分，配合@layer reset确保优先执行，并须为不支持浏览器提供fallback。
:where() 为什么能让基础样式“不抢戏”
它不是降低权重，是直接归零——:where()括号内所有选择器（哪怕包含#header或.nav .item a）都不参与特异性计算，整条规则权重恒为 (0, 0, 0, 0)。这意味着它不会压过.btn（权重 (0, 0, 1, 0)），也不会因嵌套太深失控。它的作用不是“赢”，而是“让位”。
:where() 写错位置就彻底失效
常见错误是把整个选择器包进去：:where(.my-btn[disabled])会让整条规则权重归零，连基础样式都可能丢失；正确写法是只包裹需要降权的部分：.my-btn:where([disabled])，此时.my-btn仍贡献权重，:where([disabled])部分不加权。
- ✅ 推荐：
.card :where(.title, .subtitle)— 外层.card提供权重支撑 - ❌ 避免：
:where(.card .title)— 括号内含组合器，整条规则权重为 0，极易被覆盖 - ⚠️ 注意：
:where()不能嵌套，:where(:where(.a))第二层无效
和 @layer reset 配合才真正可控
单独用 :where() 不够稳——如果它出现在样式表靠后位置，依然会被前面高权规则压制。必须让它“先清场”：
@layer reset {
:where(h1, h2, h3) { margin: 0; }
:where(ul, ol) { padding-left: 0; }
}
-
@layer reset确保这些规则优先执行，不受后续@layer component干扰 - 别依赖
@supports selector(:where(*))做兜底——老浏览器会直接跳过整条规则，得手动写降级：h1, h2, h3 { margin: 0; } - Safari 15.4+ / Chrome 105+ 才稳定支持，安卓 UC、IE 全不支持，必须 fallback
哪些场景千万别用 :where()
它不是万能低权 wrapper。在关键布局规则里滥用，反而埋雷：
- 比如写
:where(.grid) { display: grid; }—— 一旦业务代码漏写.grid，布局直接塌陷，且 DevTools 里权重为 0 的规则排序靠后，极难排查 - 纯标签或通配符再包一层
:where()没意义：:where(div)和div权重一样，都是(0, 0, 0, 1) -
:where(a:hover)在旧 Safari 可能静默失效，hover 状态不触发
真正该用它的地方，是 reset、工具类、第三方组件穿透覆盖——目标明确：不争权，只匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
