推荐使用 .card :is(h1, p, .meta) 替代重复前缀，语义清晰且复用性强；需避免嵌套:is()、伪元素及不支持的选择器，并为旧浏览器提供兼容性回退。
用 :is() 替代长串重复前缀选择器
当多个选择器共享同一父级路径（比如 .card h1、.card p、.card .meta），硬写三遍 .card 不仅冗余，还容易漏改、难定位。直接用 :is() 把后半段“变体”括起来就行。
常见错误是把整个选择器塞进去却忘了保留共用部分：写成 :is(.card h1, .card p, .card .meta) 没问题，但写成 .card :is(h1, p, .meta) 语义就变了——后者匹配的是「所有在 .card 内的 h1/p/.meta」，而前者严格限定为「以 .card 开头的那三条规则」。实际项目中多数情况要的是后者写法。
-
.card :is(h1, p, .meta)→ 推荐，语义清晰，复用性强 -
:is(.card h1, .card p, .card .meta)→ 可行，但修改父选择器时得全量替换 - 避免嵌套
:is(:is(...))，目前 Safari 15.4+ 才稳定支持多层，旧版会直接失效
:is() 的参数里能写哪些东西
它接受任意简单选择器或组合选择器，包括类名、标签、属性选择器、伪类，甚至 :not() ——但不能包含伪元素（::before）或需要运行时计算的选择器（如 :has()，目前仅 Chrome 105+ 支持且不稳定）。
典型误用是试图在 :is() 里塞 :hover 单独使用：.btn :is(:hover, :focus) 是错的，因为 :hover 必须依附于某个元素；正确写法是 .btn:is(:hover, :focus)，让伪类直接作用于 .btn。
立即学习“前端免费学习笔记（深入）”；
- 允许：
:is([disabled], [readonly])、:is(.error, .warning, .success)、:is(a[href^="https"], a[href^="tel"]) - 禁止：
:is(::before)、:is(:has(> img))（兼容性差）、:is(* + *)（相邻兄弟选择器不被支持） - 注意空格：
.list :is(li, .item)匹配后代，.list:is(li, .item)会报语法错误——冒号前不能有空格
IE 和老版 Safari 下怎么处理 :is() 回退
它不支持渐进增强式回退（不像 @supports 可包裹整条规则），浏览器遇到不认识的 :is() 会直接丢弃整条 CSS 规则。所以不能只靠它做关键样式。
最稳妥的做法是：先写一遍兼容性好的基础选择器，再在后面覆盖一层 :is() 版本。现代浏览器会执行后者，老浏览器跳过并沿用前者。
.card h1,
.card p,
.card .meta {
color: #333;
}
<p>/<em> 现代浏览器生效，老浏览器忽略整行 </em>/
.card :is(h1, p, .meta) {
color: #222;
}- 别用
@supports selector(:is())做开关——Firefox 119+ 才支持这个特性查询，此前版本查了也白查 - 构建工具如 PostCSS 的
postcss-selector-not插件可自动展开:is()，但要注意它无法处理含:not()的嵌套结构 - 如果项目必须支持 iOS 14.5 以下（Safari 14.1），那就别用
:is()，老老实实分组写
为什么有时候用了 :is() 反而更难维护
它压缩的是视觉重复，不是逻辑重复。当几个选择器看似结构相似、实则语义不同（比如 .header h1 是主标题，.sidebar h1 是模块标题），强行合并成 :is(.header, .sidebar) h1 会导致样式污染——改一个就影响另一个。
另一个隐形坑是 specificity（权重）。:is(.a, .b, .c) 的权重等于其中最高那个（比如 .b 是 class，权重就是 10），而不是三个加起来。这和传统逗号分组一致，但很多人误以为它“降权”了。
- 优先合并「同场景、同目的、同状态」的选择器，比如表单控件的禁用态：
input:is(:disabled, [aria-disabled="true"]) - 避免跨区块合并，例如不要把
.modal .close和.tooltip .close合进同一个:is()，除非它们真该一模一样 - 编辑器里搜
:is(很快，但搜.card h1这种固定字符串更快——别为了省几行代码牺牲可检索性
没展开说的细节其实都在 specificity 计算和浏览器解析顺序里。写的时候多看一眼 DevTools 里哪条规则被应用了，比背规范管用。
