应优先用 :is() 替代重复的多选择器（如 nav a:hover, header a:hover → :is(nav, header) a:hover），它打包匹配且不降低 specificity；:where() 用于零权重重置样式，避免 !important 冲突。
什么时候该用 :is() 而不是手写多个选择器？
当你发现 CSS 里反复出现相似结构、只是中间某一层标签名不同（比如 article h2、section h2、aside h2），又不想复制粘贴三遍规则时，:is() 就是为此设计的。它把多个选择器“打包”成一个逻辑组，匹配其中任意一个即可生效。
常见错误是把它当作用来“简化后代选择器层级”的工具——比如写 :is(article, section) h2 看似简洁，但实际等价于 article h2, section h2，浏览器仍要分别计算两组关系，性能并无提升；真正省事的是减少重复声明，而非压缩选择器长度。
实操建议：
- 优先用于替代长串逗号分隔的选择器，尤其是涉及多级嵌套时（例如
nav a:hover, header a:hover, footer a:hover→:is(nav, header, footer) a:hover） - 注意
:is()不降低 specificity：:is(.foo, div)的权重等于div（即 0-0-1），不是取最小值 - 支持伪类和伪元素，但不能包含
&或组合符（如:is(a:hover b)无效）
:where() 的核心价值：零权重覆盖已有样式
如果你需要“强制重置某类元素的样式”，又怕 specificity 冲突导致写一堆 !important，:where() 是更干净的解法。它内部所有选择器的权重都被视为 0-0-0，完全不参与层叠计算。
立即学习“前端免费学习笔记（深入）”；
典型场景是 CSS 框架或组件库的“基础重置”：比如统一清除所有标题的 margin，但又不想影响用户自定义的高权重规则。这时候写 :where(h1, h2, h3) { margin: 0; }，哪怕用户写了 article h1 { margin: 1em; }（权重 0-1-1），也能被安全覆盖。
实操建议：
- 只在需要“无侵入式兜底”时用
:where()，比如 reset、utility class、主题变量注入 - 别指望它提升性能——它和
:is()一样会触发完整匹配流程，只是权重归零 - 不能包含
:is()或:where()自身（嵌套无效），也不支持:not()里的复杂表达式
嵌套中混用 :is() 和 :where() 的真实代价
很多人尝试写类似 article :where(h2, h3) + p 或 :is(.card, .post) :where(> h2)，以为能进一步压缩规则。但这类写法容易触发两个隐藏问题：
一是浏览器解析成本上升：每个 :where() 都需单独做一次子树遍历，嵌套越深，回溯越多；二是可读性断崖下跌，后续维护者很难一眼判断哪个部分决定权重、哪个部分负责匹配。
实操建议：
- 避免在
:is()/:where()内部再套关系选择符（如>、+、~），它们本就不支持这种语法（会直接失效） - 如果真需要“某容器下任意一级标题”，老老实实用
article h2, article h3更可靠，现代 CSS 引擎对这种扁平列表优化得很好 - 构建工具（如 PostCSS）目前对
:where()的 polyfill 支持极弱，上线前务必检查目标浏览器版本（Chrome 105+、Firefox 103+、Safari 15.4+）
为什么你写的 :is() 规则没生效？
最常见的失效原因不是语法错，而是选择器本身不合法。CSS 规范明确禁止在 :is() 中使用某些组合，一旦出错，整个 :is() 块会被浏览器静默丢弃——连带里面其他正确项也一起失效。
比如 :is(div > p, span + em) 看似合理，但 > 和 + 在 :is() 内部是非法操作符，整条规则直接作废；又比如 :is(:hover, :focus-within) 单独写没问题，但放在媒体查询里可能因环境限制被忽略。
实操建议：
- 调试时先把
:is()拆成独立选择器逐个测试，确认每个子项都能单独命中 - 用浏览器 DevTools 的 “Computed” 面板看样式是否出现在列表里——如果完全没出现，大概率是
:is()整体被丢弃了 - 注意伪类顺序：某些旧版 Safari 对
:is(a:focus, button:hover)这种跨元素类型混合支持不稳定，建议同类元素分组
最易被忽略的一点：:is() 和 :where() 都不能解决“动态内容插入后样式丢失”的问题——它们只在 CSS 解析阶段起作用，不监听 DOM 变化。如果 JS 动态添加了新元素，得靠 class 切换或 scoped styles 来补位。
