CSS如何使用-is伪类缩减重复选择器_通过分组选择器提升代码维护效率

推荐使用 .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 规则。所以不能只靠它做关键样式。 arXiv Xplorer ArXiv 语义搜索引擎，帮您快速轻松的查找，保存和下载arXiv文章。