:is()仅合并并集关系，不改变层级结构，也不能替代预处理器的&逻辑；应将变化部分放入:is()，不变层级保留在外，避免语义错乱或性能下降。
:is() 能简化重复前缀的复合选择器，但它的简化能力有明确边界——它只合并「并集关系」，不改变层级结构，也不能替代预处理器的 & 逻辑。
用 :is() 替换多个相同前缀的选择器
当你有一组结构相似、仅末端不同的选择器时，:is() 最有效。比如要给多种容器下的 button 统一加样式：
- 原始写法（冗余）：
header button, nav button, aside button { padding: 8px 12px; } - 简化后：
header :is(button), nav :is(button), aside :is(button) { padding: 8px 12px; }—— 这没意义，因为:is(button)就是button - 正确用法：
:is(header, nav, aside) button { padding: 8px 12px; }—— 把公共父级收进:is()，子元素保持在外
关键点：把「变化的部分」放进 :is()，「不变的层级关系」保留在外。否则语义错乱或性能反降。
:is() 不能嵌套相对引用（如 &），别在原生 CSS 里这么写
网上常见错误示例：body { :is(&, & > div) > section { ... } } —— 这在纯 CSS 中会直接失效，因为 & 是 Sass/Less/PostCSS 插件的语法，不是 CSS 标准的一部分。
立即学习“前端免费学习笔记（深入）”；
-
:is()的参数必须是完整、独立的选择器，例如:is(section, div > section) - 写成
body > :is(section, div > section)是合法的，但它匹配的是body > section和body > div > section，注意中间多了一层body >，和body > section, body > div > section等价 - 但若你后续要加
article > section，就得扩写为body > :is(section, div > section, article > section)，可读性反而下降
哪些场景下 :is() 反而让问题更复杂？
当你要表达「某元素是直接子元素，或是隔一层的孙元素」这类非并列层级意图时，:is() 容易误导人：
- 错误目标：
section是body的直接子元素，或body > div > section—— 看似可用body > :is(section, div > section) - 实际风险：这种写法掩盖了结构差异；调试时无法一眼看出哪条规则对应哪个 DOM 路径
- 更稳妥做法：显式写出
body > section, body > div > section，虽然多打几个字符，但浏览器兼容性好（Chrome 88+ / Firefox 90+ / Safari 15.4+）、DevTools 可精准定位、团队协作无歧义 - 性能上无实质差异：现代引擎对这种扁平并集选择器的解析已高度优化
真正需要警惕的，是把 :is() 当成“万能缩写工具”去套用。它解决的是「列举式并集」问题，不是「动态路径推导」问题。一旦层级逻辑变复杂，老老实实拆开写，往往比强行压缩更可靠。
