:where() 使括号内选择器权重恒为0，不参与优先级计算；而 :is() 取内部最高权重。适用于绕过第三方高权重样式，需现代浏览器支持并注意构建工具转译。
为什么 :where() 能“清空”选择器权重
因为 :where() 内部的选择器**完全不参与权重计算**——它产生的匹配结果权重恒为 0，无论里面写的是 #id、.class 还是 div p span。这不是“降低”，而是“归零”。浏览器在计算样式优先级时，直接跳过 :where() 括号里的所有权重贡献。
常见错误现象：以为用 :where(.btn-primary) 就能压过 button 的基础样式，结果发现没生效——其实不是没生效，而是它本就不该靠权重赢，得靠它后面的声明顺序或更外层上下文来决定最终效果。
- 只适用于现代浏览器（Chrome 105+、Firefox 103+、Safari 15.4+），旧版 Safari 需要兜底
-
:where()不支持伪元素（如::before）和伪类嵌套（如:hover不能写在:where()里再套一层） - 它不会阻止样式被继承或层叠，只是让括号内那部分“不争权重”
:where() 和 :is() 的关键区别在哪
:is() 会取括号内**最高权重的选择器作为整个函数的权重**；而 :where() 始终为 0。这是二者最根本的差异，直接影响你是否能用它绕过第三方 CSS 的权重压制。
使用场景：当你想给第三方组件库的某个 class 加样式，但又不想被它的 .component .item.active（权重 0-2-1）压倒时，用 :where(.my-theme) .item 就能确保你的规则只按声明位置生效，不拼权重。
立即学习“前端免费学习笔记（深入）”；
-
:is(.a, #b, div p)权重 =#b的权重（0-1-0） -
:where(.a, #b, div p)权重 = 0-0-0（永远） -
:where()不能用在@keyframes或属性选择器值中（如[type=":where(text)"]是非法的）
实际怎么用：替换高权重选择器的典型写法
比如你想覆盖 Ant Design 的按钮禁用态颜色，但它的选择器是 .ant-btn[disabled], .ant-btn:disabled（权重 0-2-1），你写 .my-btn[disabled] 根本压不过。这时候用 :where() 包一层，就不用拼权重了。
.my-btn:where([disabled]) {
color: #999;
cursor: not-allowed;
}
这段代码的权重就是 0-1-1（来自 .my-btn），:where([disabled]) 那部分不加权。只要它出现在样式表中比 Ant Design 规则靠后，就会生效。
- 别写成
:where(.my-btn[disabled])——这会让整个选择器权重归零，可能连基础样式都丢了 - 可以链式使用：
.container :where(.alert.error)，外层.container保留权重，内部归零 - 不推荐用在需要精确控制 specificity 的调试场景里——它会让 DevTools 的“Computed”面板里权重显示为 0，容易误判
兼容性兜底和构建工具注意点
PostCSS 插件（如 postcss-preset-env）能自动把 :where() 编译成等效的重复选择器，但要注意编译后体积和可读性变化。
常见错误现象：开发时看着好好的，打包后样式失效——大概率是构建流程没启用 :where() 转译，或者用了不支持该特性的旧版插件。
- Webpack + PostCSS：确认
postcss-preset-env版本 ≥ 7.8，并开启stage: 3 - Vite 默认不转译
:where()，需手动加插件；否则生产环境 IE/旧 Safari 直接忽略整条规则 - 不要在 CSS-in-JS 库（如 styled-components）里依赖运行时解析
:where()，服务端渲染时可能不识别
真正难的不是写对语法，而是判断什么时候该用它——不是所有“想降低权重”的地方都适合，比如你要微调某个深层嵌套组件的间距，用 :where() 可能反而让维护者看不懂意图。它是个精准手术刀，不是万能胶带。
