应手动回退并慎用:is()，因其在旧版safari中静默失效、不支持渐进增强；仅当重复祖先路径或语义一致并列元素时省事，禁用混权、单独样式覆盖、无效选择器及伪元素等场景。
直接用 :is() 替代重复的逗号分隔选择器，但必须搭配手动回退规则——它不支持渐进增强，旧版 Safari（≤15.3）会静默丢弃整条规则，不能只靠它兜底。
什么时候该用 :is() 而不是手写逗号列表
当你反复写同一段祖先路径或语义一致的并列元素时，:is() 才真正省事。比如：.card h1、.card p、.card .meta → 改成 .card :is(h1, p, .meta)；又比如 h1、h2、h3 → 改成 :is(h1, h2, h3)。
以下情况别硬套：
- 括号里混用不同权重的选择器（如 :is(.title, #main h1)），会导致整条规则按高权项计算，可能意外覆盖其他样式
- 想给其中某一项单独加样式（如再写 h2 { font-size: 1.5em; }），会被 :is() 规则覆盖，因为权重相同且后者更晚解析
- 任意一个选择器无效（比如拼错类名、用了不支持的伪类），整条 :is() 规则在部分浏览器中静默失效，不像手写逗号列表还能保留有效项
:is() 里能写什么、不能写什么
它接受合法的简单选择器或组合选择器，但每个参数必须是“可独立存在”的完整片段：
- ✅ 允许：
:is(h1, [data-role="title"], .page-title)、:is(nav > ul, .menu-list) li a、button:is(:hover, :focus) - ❌ 禁止：
:is(.a .b, .c .d)（浏览器当两个整体路径处理，不是分别匹配） - ❌ 禁止：
:is(h2::after, p)（含伪元素，整条规则被忽略） - ❌ 禁止：
.btn :is(:hover, :focus)（伪类必须依附于主体，正确写法是.btn:is(:hover, :focus)）
兼容性与回退必须手动写，不能靠 @supports
@supports selector(:is(*)) 在 Firefox 119+ 才支持，Chrome 和 Safari 不认这个检测方式，所以不能当开关用。可靠做法是先写兼容规则，再用 :is() 覆盖：
.card h1, .card p, .card .meta { color: #333; }
.card :is(h1, p, .meta) { color: #222; }
这样老浏览器只执行第一行，新浏览器执行第二行并覆盖第一行；同时注意 PostCSS 插件（如 postcss-preset-env）默认会把 :is() 降级为长逗号列表，反而增大体积，需显式关闭降级配置。
最易被忽略的是：括号内任一选择器出错，整条规则就废了——它不像 JS 那样报错中断，而是静默跳过，调试时得逐个验证括号里的每一项是否真实存在、语法合法、环境支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
