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

张开发
• 2026/4/19 0:10:51 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

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文章。

更多文章