要定位多个共享相同前缀的类，通常您必须依赖不稳定的属性选择器或在标记中添加额外的基础类。为了简化这一过程，CSS即将推出一种新的选择器：类前缀选择器（.prefix-*）。 ~ ⚠️ 本文关于即将推出的CSS特性。您目前还不能使用它…… 这个特性刚刚在两周前通过，并且目前只存在于规范文本中。该规范在准备好供浏览器实施之前，很可能会进行一些更改。 ~ 问题：定位多个前缀类 在为类属性使用类名时，常见的做法是使用前缀来保持某种分组或层次。您可能熟悉诸如.btn-primary，.btn-secondary，.btn-danger等类。要为这些按钮应用基础样式，您通常不得不列出它们，或者引入一个单独的.btn基础类： /* 添加基础类 */ .btn { padding: 0.5rem 1rem; border-radius: 4px; } /* 或者列出所有内容……真糟糕！ */ .btn-primary, .btn-secondary, .btn-danger { padding: 0.5rem 1rem; border-radius: 4px; } 有些人甚至诉诸于子字符串匹配的属性选择器，但在处理单个元素上的多个类时，这些选择器通常是不稳定且难看的： /* 可行，但在处理空格时可能出错 */ [class^="btn-"], [class*=" btn-"] { padding: 0.5rem 1rem; } ~ 解决方案：类前缀选择器 就在两周前，在2026年8月的CSS工作组F2F会议上，我们决定在CSS选择器第5版规范中添加一个专用的类前缀选择器。这个想法最初是由Lea Verou在2024年提出的（w3c/csswg-drafts/#10001）。语法非常直接： .btn-* { padding: 0.5rem 1rem; border-radius: 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 (Blink) ❌ 不支持 订阅CrBug #543356377以跟进。 Firefox (Gecko) ❌ 不支持 目前没有跟踪此问题的bug。 Safari (WebKit) ❌ 不支持 目前没有跟踪此问题的bug。 该功能仍处于早期阶段，需要进一步完善，因此可能需要更多的时间才能在生产中使用它…… # 特性检测 您可以使用常规的@supports规则进行特性检测： @supports selector(.foo-*) { /* 浏览器支持 */ } 以下CodePen使用这个规则，当您的浏览器支持时会亮起绿色：查看由Bramus（@bramus）在CodePen上创建的CSS类前缀选择器支持测试。 传播这个消息 随意重新分享以下帖子之一在社交媒体上以帮助传播这个消息： 🦋 Bluesky 🦣 Mastodon ~