CSS 新增前缀选择器，一键选中多类名
The Future of CSS: Target Multiple Classes with the Class Prefix Selector
过去，如果你想给所有以 btn- 开头的类名统一添加样式，要么在 HTML 里额外加一个基础类，要么写一堆冗长的选择器，甚至用容易出错的属性选择器。现在，CSS 工作组刚刚在柏林会议上正式通过了 Class Prefix Selector 提案。这意味着未来你可以直接用 .btn-* 这样的语法，轻松选中所有以 btn- 为前缀的类。这个新特性专为设计系统和工具类命名而生，能大幅简化 CSS 代码，避免 HTML 膨胀。不过别急着用，目前浏览器尚未支持，预计还需要几年时间才能落地。
这个特性刚刚出炉，两周前才刚刚定稿，目前仅存在于规范文本中。
- jjcm
在他们的示例中，他们将 btn-* 列为选择器通配符，用于匹配 .btn-primary|secondary|danger。我不禁在想，为什么不能直接把类名写成 .btn.primary，然后只用 .btn 作为选择器呢？
别误会，我很欣赏这种便利性，但我确实担心选择器性能会下降，因为这本质上最终会变成一个正则表达式。我对这个需求的必要性持怀疑态度。
- dymk
就我个人而言，我不认为这是对 CSS 的改进。我更喜欢能通过 grep 搜索标识符来查看它们在哪里被使用。现在你没法依赖这一点——也许某条规则现在被前缀选择器覆盖了。
- graypegg
*[class*=btn-] { ... }
我知道这是在匹配 class 属性而不是单个类名，但如果大家真的对这种语法特性有需求，我觉得我们在实际项目中会看到更多这样的用法，对吧？
就像 `some-other-btn-primary` 也会匹配这条规则这个问题，虽然挺麻烦，但如果人们更倾向于这样写样式规则，那也是可以接受的。