:where()使括号内选择器权重归零，仅匹配不参与层叠计算，适用于reset、工具类等需被轻松覆盖的场景；外层选择器权重照常计算，不可嵌套，伪元素和ID可安全使用。
为什么 :where() 能让样式权重变成 0
因为 :where() 内部的选择器不参与权重计算——哪怕你写 :where(.btn.primary:hover)，最终算出来的 specificity 也是 0-0-0，不是通常的 0-2-1。这不是“降低”，是直接清零。它只做匹配，不抢覆盖权。适合写 reset、base、utility 类样式，比如按钮默认色、表单基础边距这些你明确希望被后续规则轻松覆盖的部分。
常见错误现象：:where(.text-lg) { font-size: 1.125rem; } 写完发现自定义类 .text-lg.custom 还是没生效，其实不是 :where() 问题，而是你忘了：它只清自己括号里的权重，外面套一层 .container .text-lg 就又带权重了。
- 只对
:where()括号内的选择器清权，外层选择器照常计权 - 不能嵌套使用
:where(:where(...))，第二层无效 - 伪元素、属性选择器、ID 都能放进去，但 ID 不会触发警告（不像
:is()那样会因 ID 导致整组失效）
:where() 和 :is() 在覆盖场景下怎么选
要“可被覆盖”，无条件选 :where()；要“兜底兼容 + 保留一定权重”，才考虑 :is()。比如你在写一个设计系统的基础文本样式，目标是让业务组件随便加个 .text-red-500 就能盖掉默认灰，那就必须用 :where()。而 :is() 的权重取括号内最高值，:is(.a, #b, [data-id]) 权重是 1-0-0（因为有 ID），反而更难覆盖。
使用场景差异：
- reset / base 层（如
* { margin: 0; }的现代替代）→ 用:where(*) - 工具类（
mt-2,flex,sr-only）→ 必须用:where()，否则和组件类打架 - 需要兼容老浏览器（
:where()不支持 IE 和 Safari :is() + 注释说明权重风险
哪些地方写了 :where() 反而更难维护
当选择器本身已经很弱（比如纯标签或通配符），再包一层 :where() 没实际意义；更危险的是在关键布局规则里滥用，比如 :where(.grid) { display: grid; }，看起来“好覆盖”，但一旦业务代码漏写了 .grid，整个布局就塌了，而且你还查不到是谁覆盖掉了——因为权重为 0 的规则在 DevTools 里排序靠后，容易被忽略。
容易踩的坑：
- 把
:where()当成“安全作用域”乱用，结果语义丢失、调试困难 - 和 CSS-in-JS 或原子化框架混用时，没意识到对方生成的选择器可能带高权重，导致覆盖失败
- 用
:where([data-theme="dark"]) { ... }做主题切换——没问题，但记得属性值要严格匹配，空格、引号、大小写都影响是否命中
PostCSS 或构建工具里要不要补全 :where()
不用。目前所有主流 PostCSS 插件（包括 postcss-preset-env）都不转换 :where()，因为它没有等价的低版本语法。加了 Babel 或 Autoprefixer 也不会降级——Safari 15.4+、Chrome 105+、Firefox 103+ 都原生支持，旧版本直接跳过该规则（不影响其他样式）。强行转成 :is() 反而引入权重意外升高问题。
实操建议：
- CI 中加一条检查：
grep -r ':where(' src/ | grep -v '.d.ts'，确认没误写成:wheree或拼错 - VS Code 安装
PostCSS Language Support插件，能高亮识别，避免写成:where(.foo) { color: red; }却忘记后面还有个!important（那等于白写） - 团队规范里明确：基础层样式文件（如
base.css）允许且推荐用:where()；组件级样式禁止使用
最易被忽略的一点：:where() 不解决选择器顺序问题。权重为 0 的规则，如果写在后面，依然会覆盖前面同权重的规则——别以为清了权就不用管书写顺序了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
