:is() 和 :where() 权重不同：:is() 取括号内最高权重，:where() 恒为 0-0-0；前者用于需提升权重的场景，后者专为无侵入式样式设计，如框架重置或工具类封装。
为什么 :is() 和 :where() 都能简化选择器，但权重完全不同
因为它们的「层叠权重（specificity）计算规则」根本不同：:is() 取括号内**最高权重的选择器**作为整个伪类的权重；而 :where() **始终为 0**，完全不参与层叠竞争。
这意味着：哪怕你写 :where(.foo, #bar, div[role="alert"])，它也等价于一个无样式权重的通配符——不会覆盖任何已有声明，也不会被低权重要求轻易推翻。
-
:is(h1, .title, [data-heading])的权重 =h1的权重（0-1-0），即能压过普通类名 -
:where(h1, .title, [data-heading])的权重 = 0-0-0，连div标签选择器都压不过 - 浏览器兼容性上，两者在 Chrome 105+/Firefox 103+/Safari 15.4+ 均已稳定支持，但旧版 Safari 对
:where()有短暂 bug（忽略整个规则）
什么时候必须用 :where() 而不是 :is()
当你想「批量声明样式但绝不干扰现有优先级」时，:where() 是唯一安全解法。典型场景是 CSS 框架的重置或工具类封装。
比如你想统一给所有标题加间距，又怕不小心覆盖用户自定义的 h2 { margin: 0; }：
:where(h1, h2, h3) {
margin-block-end: 1rem;
}
这段代码永远不会推翻用户写的 h2 { margin: 0; }（哪怕那条规则只有一条标签选择器），因为它的权重是 0。
- 用
:is()写同样逻辑会意外提升权重，导致难以调试的覆盖行为 - 组件库中封装「可选修饰类」时（如
:where(.btn.-primary)），避免污染宿主样式表 - PostCSS 插件（如
postcss-preset-env）对:where()的降级处理更保守，部分版本会直接剔除而非模拟
:is() 的真实使用边界在哪
:is() 不是“语法糖替代品”，而是「需要精准控制权重时的明确意图表达」。它适合替换那些你**本就打算提高权重**的组合选择器。
例如重构重复的高权重选择器：
/* 原写法（冗长且难维护） */
.article h2, .article h3, .article h4 { line-height: 1.3; }
.sidebar h2, .sidebar h3, .sidebar h4 { line-height: 1.3; }
<p>/<em> 改用 :is() 后，语义清晰，且权重仍由 h2/h3/h4 决定 </em>/
:is(.article, .sidebar) :is(h2, h3, h4) { line-height: 1.3; }</p>
- 不能用
:is()替换「兜底低权重要求」，比如* + p类型的通用间隔，否则会意外获得比预期更高的权重 -
:is()不支持在伪元素或属性选择器内部嵌套（如:is(::before, ::after)无效；:is([href])合法但:is([href^="https"]) | [href$=".pdf"]中的逻辑运算符需额外注意） - 当括号内含无效选择器（如
:is(.foo, :not(.bar))中:not()缺少参数），整个:is()规则会被浏览器忽略（而:where()同样如此）
调试时最容易忽略的权重陷阱
开发者常以为「写了伪类就等于加了新层级」，但实际上浏览器 DevTools 的 computed 面板里，:where() 的权重显示为 0,0,0，而 :is() 显示的是其内部最高项的值——这个差异在审查面板里并不高亮，容易误判。
- 用
getComputedStyle(el).getPropertyValue('margin-block-end')查值时，看不出来源权重，得切到 Styles 面板逐条点开规则看 specificity 数字 - 当
:where()和:is()混用在同一作用域（如都作用于button），前者永远输，哪怕它写在后面 - CSS-in-JS 库（如 Emotion、Linaria）目前对
:where()的哈希化/作用域处理尚不统一，某些版本会错误地给它添加局部 class 前缀，破坏零权重特性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
