:is()通过合并选择器并统一按内部最高权重计算，避免重复书写和权重混乱；:where()则始终权重为0，专用于不干扰优先级的兜底样式。
为什么 :is() 能解决 “重复写 .btn, .btn-primary, .btn-secondary…” 的问题
因为 :is() 把多个选择器合并成一个逻辑组，浏览器只按其中最高权重的子选择器计算最终权重，同时语法上避免重复。比如 :is(.btn, .btn-primary, .btn-secondary):hover 等价于分别写三个规则，但更短、可维护性高。
常见错误现象：手写分组时漏掉某个变体（比如忘了 .btn-danger），或者用逗号分隔后发现 .btn:hover, .btn-primary:hover, .btn-secondary:hover 权重不一致（.btn-primary:hover 比 .btn:hover 权重高，导致样式覆盖混乱）。
-
:is()内部所有选择器权重被“抹平”——整个:is(...)的权重取内部最高那个，比如:is(div, .cls, #id)权重 = ID 选择器权重（0-1-0） - 不支持伪元素或复杂组合器：
:is(.a + .b)合法，但:is(.a::before)不合法（伪元素不能出现在:is()内） - Safari 15.4+、Chrome 105+、Firefox 103+ 支持；旧版需降级用逗号分组 + 手动统一权重
:where() 和 :is() 的关键区别在哪
核心就一条：:where() 的权重永远是 0，不管里面塞了 #id 还是 div > ul li a[href] —— 它纯粹为了简化写法，不干扰已有样式优先级。
使用场景：你想给一组元素加基础样式（比如统一禁用光标），又怕破坏现有规则权重，就用 :where()。比如 :where(button, input[type="button"], [role="button"]) { cursor: default; }，这段不会压过任何已有的 button:hover { cursor: pointer; }。
立即学习“前端免费学习笔记（深入）”；
-
:is(.a, .b, #c)权重 = ID 级（0-1-0）；:where(.a, .b, #c)权重 = 0-0-0 -
:where()更适合“兜底”或“重置”类规则，尤其在 CSS 框架或设计系统中控制基底样式 - 两者都不支持动态参数或 JS 变量，纯静态匹配；也不能嵌套另一个
:where()或:is()
遇到 “InvalidSelectorError” 或样式不生效，先查这三件事
这两个伪类对语法错误更敏感，浏览器会直接丢弃整条规则，而不是忽略错误部分。
常见错误现象：写了 :is(.btn, .btn-lg, )（末尾多余逗号）、:is(.a, :hover)（单独伪类非法）、或用了不支持的浏览器（如老 Edge 或 iOS 15.2）导致整条 CSS 失效，但控制台可能只报模糊警告。
- 检查括号是否闭合、逗号是否多余、内部是否含非法选择器（如
:not()里再套:is()是允许的，但:is(:hover)不行） - 确认目标环境支持：可以用
@supports selector(:is(*)) { ... }做特性检测，再包裹降级规则 - 别在关键路径上全量替换——比如把所有逗号分组立刻换成
:is()，可能因权重变化意外覆盖已有样式；建议先从低风险模块（如工具类、辅助类）试起
和传统逗号分组比，性能有影响吗
没有实际可测的性能差异。现代浏览器对 :is() 和 :where() 的解析已优化到位，甚至比长串逗号分组略快一点（因为内部做了去重和归一化）。
但要注意：写法本身不慢，滥用会拖慢——比如 :is([class*="foo"], [class^="bar"], [class$="baz"], [class~="qux"]) 这种属性选择器堆砌，无论包不包 :is()，都触发低效匹配。
- 真正影响性能的是选择器复杂度，不是是否用了
:is()；避免在:is()里塞通配、属性模糊匹配、深层后代组合 -
:where()因权重为 0，在大型项目中反而有利于减少样式冲突调试成本——这点比运行时性能更重要 - 构建工具（如 PostCSS）目前不自动转译它们，所以不能指望通过插件兼容老浏览器；需要自己控制输出目标
:where() 只是缩写，没意识到它彻底放弃话语权，这对维护大型 CSS 架构才是关键。 
