:where() 内部选择器权重恒为0，故整个规则权重为0-0-0，天然不干扰后续样式优先级，适用于全局基础重置，但不支持嵌套伪类且存在safari兼容性问题。
为什么 :where() 能绕过 CSS 权重计算
因为 :where() 内部选择器的权重恒为 0，不管里面写 div、.btn 还是 #header，整个伪类产生的样式规则权重都是 0-0-0。这和 :is() 不同——后者会取内部最高权重项参与计算，而 :where() 直接“清零”。
实际效果就是：用它写的重置规则，天然不会被后续普通类名覆盖，也无需靠 !important 强行压服。
- 适合写全局基础重置（如
button、input、a的默认外观抹除） - 不能用于需要“有选择地提升优先级”的场景（比如只想覆盖某个特定组件内的
h2，又不想影响别处） - IE 完全不支持，现代项目若需兼容到 Edge 17–18，得加降级方案
:where() 和 * {} 重置的本质区别
* {} 是通配符，匹配所有元素并触发继承/重绘，性能差、语义模糊；:where() 则只作用于你明确列出的标签或类，可控性强得多。
比如想统一去掉常见表单控件的默认边框和轮廓，但又不想碰 svg 或 canvas：
:where(button, input, select, textarea) {
border: none;
outline: none;
background: transparent;
}
- 比
* {}更轻量，浏览器不用遍历全部 DOM 节点 - 可组合使用：
:where(.card > *):not(:first-child)这种写法在:where()里依然保持零权重 - 注意：嵌套伪类如
:where(:hover)无效，:where()只接受简单选择器列表
容易被忽略的浏览器兼容性断层
Chrome 105+、Firefox 103+、Safari 15.4+ 支持，但 Safari 15.0–15.3 仅部分支持，且存在 :where() 内部选择器解析异常的问题——比如 :where(.a, .b, .c) 在 Safari 15.2 下可能漏掉最后一个。
- 上线前务必在目标 Safari 版本中实测多选择器列表行为
- 若项目需支持 Safari 15.0–15.3，建议拆成多个独立
:where()规则，避免长列表 - Vite / Webpack 构建时，PostCSS 插件如
postcss-preset-env对:where()的降级非常有限，基本无法转成等效的低权重要求，别指望自动 polyfill
当重置逻辑变复杂时，:where() 的边界在哪
它只解决“权重归零”这一个点，不解决嵌套作用域、状态组合、属性条件等复杂逻辑。例如想对禁用态按钮做特殊处理，:where(button:disabled) 是合法的，但 :where(button[aria-disabled="true"]) 就容易因属性值空格或引号问题失效。
- 属性选择器尽量用布尔型（如
disabled），少用带值的（如[data-role="primary"]） - 涉及
:not()组合时，:where(button:not(.skip-reset))可行，但:where(button):not(.skip-reset)就会失去零权重特性 - 真正难搞的是跨组件状态联动（比如父容器有
dark类时重置子元素颜色），这时仍要靠 BEM 或 CSS 自定义属性配合，:where()帮不上忙
零权重不是万能钥匙，它只管“不抢别人优先级”，不管“怎么精准命中”。写多了容易误以为样式逻辑变简单了，其实只是把复杂性悄悄移到了选择器设计上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
