CSS如何使用:is伪类缩减重复选择器_通过分组选择器提升代码维护效率-css教程-PHP中文网

推荐使用 .card :is(h1, p, .meta) 替代重复前缀，语义清晰且复用性强；需避免嵌套:is()、伪元素及不支持的选择器，并为旧浏览器提供兼容性回退。

css如何使用: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 规则。所以不能只靠它做关键样式。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

最稳妥的做法是：先写一遍兼容性好的基础选择器，再在后面覆盖一层 :is() 版本。现代浏览器会执行后者，老浏览器跳过并沿用前者。

.card h1,
.card p,
.card .meta {
  color: #333;
}
<p>/<em> 现代浏览器生效，老浏览器忽略整行 </em>/
.card :is(h1, p, .meta) {
color: #222;
}</p>

别用 @supports selector(:is()) 做开关——Firefox 119+ 才支持这个特性查询，此前版本查了也白查
构建工具如 PostCSS 的 postcss-selector-not 插件可自动展开 :is()，但要注意它无法处理含 :not() 的嵌套结构
如果项目必须支持 iOS 14.5 以下（Safari 14.1），那就别用 :is()，老老实实分组写