CSS 的未来：使用类前缀选择器定位多个类

要定位共享相同前缀的多个类，您通常必须求助于脆弱的属性选择器或向标记添加额外的基类。为了让事情变得更简单，CSS 有了一个新的选择器：类前缀选择器 ( .prefix-* )。 ~ ⚠️ 这篇文章是关于即将推出的 CSS 功能。你还不能使用它。这个功能刚刚被报道出来——它在两周前才得到解决——目前只存在于规范文本中。在准备好供浏览器实施之前，该规范很可能会发生一些变化。 ~ 问题：针对多个带前缀的类 当提出在类属性中使用的类名时，常见的做法是使用前缀来保留某些分组或层次结构。您可能熟悉 .btn-primary 、 .btn-secondary 、 .btn-danger 等类。现在要将基本样式应用于所有这些按钮，您通常必须将它们全部列出，或者引入单独的 .btn 基类： /* 添加基类 */ .btn { padding: 0.5rem 1rem;边框半径：4px； } /* 或者列出所有内容...哎呀！ */ .btn-primary, .btn-secondary, .btn-danger { 填充：0.5rem 1rem;边框半径：4px；有些人甚至求助于子字符串匹配属性选择器，但在处理单个元素上的多个类时，这些选择器可能非常脆弱且丑陋： /* Works, but can be error-prone with space */ [class^="btn-"], [class*=" btn-"] { padding: 0.5rem 1rem; } ~ 解决方案：类前缀选择器 就在两周前，在柏林举行的 CSS 工作组 F2F 会议（2026 年 8 月）上，我们决定在 CSS 选择器 5 级规范中添加专用的类前缀选择器。这个想法最初由 Lea Verou 于 2024 年提出 (w3c/csswg-drafts/#10001)。语法非常简单： .btn-* { padding: 0.5rem 1rem;边框半径：4px； } 就是这样！末尾的 -* 部分使选择器成为类前缀选择器，并将尝试匹配以连字符分隔的前缀开头的任何类。这对于实用程序类和设计系统来说是一个巨大的胜利，使您可以轻松定位相关元素组，而无需增加 HTML 负载或编写脆弱的属性选择器。 ~ 空字符串怎么样？讨论过程中出现的一个有趣的问题是 .foo-* 是否应该匹配空字符串 ( w3c/csswg-drafts/#14291 ) ，意思是： .foo-* 也应该匹配仅具有 .foo- 类的元素吗？虽然确切的默认行为仍在解决中，但目前选择器被指定为仅匹配以前缀开头并且在前缀之外至少有一个字符的类（并且前缀之外的第一个字符也不是连字符），所以不， class="foo-" 不会与 .foo-* 匹配，我认为这很好。同样的选择器也不会匹配 class="foo--" ，这也可能没问题。 ~ 非破折号怎么样？类前缀选择器目前仅限于以连字符分隔的前缀，至少一开始是这样。当我们收到像您这样的作者关于需要什么的请求时，将来可能会添加其他分隔符，例如 _ 。现在已经很清楚的一件事是，至少必须有一些分隔符。不允许使用任意前缀（如 .foo* ），至少有两个原因： 您可能会意外过度选择： .foo* 也会匹配 .footer 选择器性能：浏览器通常为类选择器创建存储桶以实现快速选择器匹配。添加任意通配符会破坏该优化。同样，选择器中间的通配符（例如 .card-*-primary ）也是不允许的。 # 浏览器支持 💡 虽然这篇文章最初发布于 2026 年 8 月，但下面的列表会不断更新。最后更新时间：2026 年 8 月 20 日。由于两周前刚刚在柏林的 CSSWG F2F 上解决了这个问题，因此目前不存在浏览器支持。要跟进进度（如果有），您可以关注以下浏览器问题：Chromium（闪烁）❌无支持 订阅 CrBug #543356377 即可跟进。 Firefox (Gecko) ❌ 无支持 目前尚无错误跟踪。 Safari (WebKit) ❌ 不支持 目前尚无错误跟踪。此功能仍处于早期阶段，需要进一步充实，因此您可能还需要几年时间才能在生产中使用它... # 功能检测 您可以使用常规 @supports 规则来检测支持： @supports 选择器(.foo-*) { /* 浏览器已支持 */ } 以下 CodePen 使用此功能，并且当您的浏览器支持它时将亮起绿色：请参阅 CodePen 上 Bramus ( @bramus ) 的 Pen CSS 类前缀选择器支持测试。传播信息 请随意在社交媒体上转发以下帖子之一，以帮助传播信息：~ 🔥 喜欢您所看到的吗？想了解最新动态吗？方法如下：也可以在 𝕏 Twitter 和 🐘 Mastodon 上找到我，但只是偶尔发帖。