文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本指南源自 til 仓库中 Clean Up Repetition With :is() Pseudo-Class 这篇实战笔记系统讲解如何使用:is()Matches-Any伪类将多组重复的复合选择器合并为一条简洁规则并结合仓库中关于 CSS 优先级、supports兜底等相邻笔记帮你掌握其宽容匹配、优先级计算与渐进增强等关键细节在真实项目中安全地用它清理冗余 CSS。问题一长串重复选择器在编写样式时我们经常需要对一组形态相似、仅元素名不同的节点应用同一套样式。最直接的做法是把每个选择器都完整写出来用逗号分隔h1.text--bold, h2.text--bold, h3.text--bold, h4.text--bold, h5.text--bold { font-weight: 500; }这串规则存在两个明显问题重复噪音.text--bold被重复书写了五次任何一个类名调整都要同步修改五处可读性差一行规则越拉越长选择器之间的共同语义标题 修饰类被淹没在重复中。这正是:is()伪类要解决的场景——它允许把一组备选选择器打包成一个占位再与后续的类、伪类或后代选择器继续拼接。用 :is() 重构before / after原笔记给出了最典型的改写方式/* before */ h1.text--bold, h2.text--bold, h3.text--bold, h4.text--bold, h5.text--bold { font-weight: 500; } /* after */ :is(h1, h2, h3, h4, h5).text--bold { font-weight: 500; }两条规则对 DOM 的匹配结果完全相同任何h1到h5且同时带有text--bold类的元素都会获得font-weight: 500。但后者的选择器数量从 5 条压缩到 1 条.text--bold只出现一次改动和维护成本大幅下降。:is()括号内是逗号分隔的选择器列表selector list你可以放任意合法的简单或复合选择器例如:is(h1, h2, .title, [data-typeheading])。它支持任意组合与嵌套也可以作为复合选择器的一部分继续追加类名、伪类或后代关系/* 后代关系命中所有标题下的链接 */ :is(h1, h2, h3) a { ... } /* 与伪类叠加 */ :is(header, footer):is(:hover, :focus-visible) { ... } /* 混合类与元素类型 */ :is(.card, article).featured { ... }原笔记引用的描述来自 CSS-Tricks:is()是 CSS 选择器 4 级工作草案中 Matches-Any 伪类的现用名称其目标是让复杂的选择器分组更容易书写。三个必须理解的关键机制1. 宽容的forgiving选择器列表无法成文前的一段内容需要说明无法成文标签仅用于无法成文的情况本案例正常成文以下为正文。:is()与普通逗号选择器列表最关键的区别在于容错性。普通列表中如果有一个选择器无效比如浏览器不认识的伪类整条规则都会被丢弃而:is()以及:where()、:not()内部遵循宽容选择器列表规则——某个条目无效时仅丢弃该条目其余条目照常生效。这一点决定了:is()天然适合作为渐进增强的载体即使你的列表里含有尚不普及的伪类其余部分也不会被连坐作废。2. 优先级specificity按列表中最高的那一个计算:is()的优先级是括号内所有条目中优先级最高的那个而不是整个列表的平均值或最弱值。例如:is(#main, .content, div) p { color: #333; }这里#mainID 选择器优先级 1-0-0会决定整条规则的优先级尽管规则本身可能匹配到的是普通div后代。这正是它与:where()的本质区别:where()的优先级恒为 0永远不提升所在规则。这一点与仓库中另一篇笔记 root-has-higher-specificity-than-html 讲的是同一类问题——选择器本身的形态会直接影响规则的优先级计算从而决定多条规则谁覆盖谁。当你要用:is()合并选择器时务必检查列表里有没有 ID 选择器否则可能无意中抬高整个规则的优先级破坏既有的覆盖关系。3. 浏览器支持仍是渐进增强的切入点原笔记特别提醒该特性曾处于 CSS 选择器 4 级工作草案阶段浏览器支持有限建议谨慎、克制地使用。如今:is()在主流现代浏览器中已获得广泛支持但考虑到它诞生较晚、旧浏览器仍可能缺失建议采用先兜底、后增强的写法/* 兜底面向所有浏览器的完整选择器列表 */ h1.text--bold, h2.text--bold, h3.text--bold, h4.text--bold, h5.text--bold { font-weight: 500; } /* 增强支持 :is() 的浏览器使用更简洁的写法覆盖 */ :is(h1, h2, h3, h4, h5).text--bold { font-weight: 500; }由于两条规则匹配的对象相同:is()版本的优先级括号内每个都是类型选择器最高 0-0-1与兜底版本一致后声明的规则会安全地覆盖前者。如果连冗余都想省掉也可以借助仓库中 conditional-styling-for-unsupported-css-features 介绍的supports特性检测来做条件增强supports selector(:is(h1, h2)) { :is(h1, h2, h3, h4, h5).text--bold { font-weight: 500; } }与 :where()、:not() 的横向对比理解:is()的边界最好把它放在同一族关系/分组伪类中对照伪类匹配语义优先级典型用途:is()命中列表中任意一个选择器取列表中最高的优先级合并重复选择器、压缩规则数量:where()与:is()完全相同恒为 0只想命中元素、又不想污染优先级方便被后续规则覆盖:not()反向排除列表中任意一个选择器取列表中最高的优先级排除一组例外元素三者都使用逗号分隔的宽容选择器列表。选择:is()还是:where()的关键决策点就是优先级想要便于被覆盖、作为默认值就用:where()想要与显式书写等价、语义清晰就用:is()。仓库中的关联阅读root-has-higher-specificity-than-html选择器形态如何影响优先级与:is()的优先级规则互为印证conditional-styling-for-unsupported-css-features用supports为低版本浏览器提供条件样式的完整方案apply-styles-to-the-last-child-of-a-specific-type::last-of-type等伪类的定位思路可与:is()搭配处理特定类型子元素apply-styles-based-on-dark-mode-preferences同为功能较新、需渐进增强的 CSS 特性写法思路可互相借鉴。小结:is()是 CSS 中用于清理重复选择器的高频工具一条规则即可表达多个备选元素 共同修饰条件同时具备宽容的无效条目容忍度。使用时只需盯住两件事——列表里最高优先级的选择器会抬升整条规则的权重以及老浏览器的支持缺口需要用冗余兜底或supports来补。掌握这几点就能在压缩样式表的同时不踩优先级与兼容性的坑。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐AlphaFold API实战从一条序列到PDB的蛋白质结构预测AlphaFold API实战从一条序列到PDB的蛋白质结构预测 给一条氨基酸序列怎么让它直接吐出原子级精度的 PDB 结构文件而不用拼一堆命令行 fla人工智能深度学习生物信息学科学计算科研终极VS Code YAML插件指南Red Hat官方支持让你的配置编写效率翻倍终极VS Code YAML插件指南Red Hat官方支持让你的配置编写效率翻倍 你是否曾在编写Kubernetes配置文件时因为一个缩进错误导致部署失败CSS3 选择器详解:empty 伪类选择符来自 doyoe/css-handbookCSS3 选择器详解:empty 伪类选择符来自 doyoe/css handbook 什么是 :empty 伪类选择器 :empty 是 CSS3 中上一篇Windows风扇控制终极指南用FanControl实现静音与性能的完美平衡下一篇5分钟掌握163MusicLyrics完全免费的歌词下载神器一站式解决音乐歌词获取难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考