配了八年 CSS，每次给一组按钮写样式都要把类名全列一遍——今天 .btn-* 把这件事彻底变了

写了八年 CSS，每次给一组按钮写样式都要把 .btn-primary、.btn-secondary、.btn-danger 全列一遍——今天 CSS 终于给这类场景专门做了一个选择器，.btn-* 把这件事彻底变了。

做设计系统的时候，类名带前缀是标准操作。.btn-primary、.btn-secondary、.btn-danger，或者 .card-header、.card-body、.card-footer，都是同一个思路：用一个共同前缀把相关的组件归组。

但问题来了——要给这一组按钮统一写基础样式，以前只有三条路：

第一条路：加一个公共类名。

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.btn-primary { background: blue; }
.btn-danger { background: red; }

然后 HTML 里每次都要写两个类：<button class="btn btn-primary">。对设计系统来说是标准操作，但每多一个组件就多一次「堆类名」，时间久了 HTML 越来越膨胀。

第二条路：把每个类名都列出来。

.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

写起来冗长，每次加新按钮还要回来改 CSS，维护成本高。

第三条路：属性选择器。

[class^="btn-"],
[class*=" btn-"] {
  padding: 0.5rem 1rem;
}

能 work，但 brittle——空格一错就匹配不上，而且可读性差，一看就不是正经写法。

上周在柏林举行的 CSS Working Group F2F 会议上，选择器规范迎来了一个不大但很实在的更新：Class Prefix Selector，语法就是 .前缀-*。

提案来自 Lea Verou，2024 年提出，终于在 2026 年 8 月正式写进了 CSS Selectors Level 5 草案。语法长这样：

.btn-* {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

这行 CSS 会匹配所有以 btn- 开头的类名——.btn-primary、.btn-secondary、.btn-danger，一个都不落。* 不是通配符，而是「前缀标记符」，告诉浏览器去找所有共享这个前缀的类。 specificity 和普通类选择器一样，是 (0,1,0)，不会意外变高。

有几个细节说清楚：

只支持连字符分隔，不支持其他分隔符。

.btn-* 可以，.btn_* 不行，.card* 也不行。规范目前只接受连字符作为分隔符，这也是出于性能的考量——浏览器可以用已有的类名哈希桶做优化，而不需要跑正则引擎。

空类和双连字符的类不会被匹配。

.foo-（只有一个连字符结尾）和 .foo--（双连字符）都不在匹配范围内。这个边界处理是规范刻意为之，避免误匹配。

任意通配符不存在。

.foo* 这种写法不在设计范围内，规范明确拒绝，原因是它会让浏览器失去优化空间，也会导致意外选中 .footer 这类完全无关的类。

用 @supports 做渐进增强。

目前没有任何浏览器实现，但可以用 @supports 做功能检测：

@supports selector(.btn-*) {
  .btn-* {
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
}

不支持的浏览器会忽略整个块，现有写法不受影响，零风险渐进增强。

这个选择器本质上解决的是一个已经存在了二十年的问题：设计系统里大量使用前缀命名约定来组织变体，但 CSS 选择器一直没有原生方式去「找所有同前缀的类」。

有了 .btn-* 之后，设计系统的基础样式层可以少写很多冗余代码，不再需要为了「共享样式」而在 HTML 里加一个无意义的 .btn 基类，也不用为了省 HTML 类名而放弃 BEM 这类命名规范。

当然，这是一个还处于草案阶段的功能。从草案到浏览器实现通常还要一两年，中间规范也可能会变。现在写进生产代码还不现实，但提前了解它的设计思路，对理解 CSS 演进方向很有帮助。

现在能做的事：

1. 关注规范进展：CSS Selectors Level 5 草案页面有更新，Chrome/Firefox/Safari 的实现 bug 是下一个里程碑信号。

2. 把现有代码里的属性选择器替换方案列出来：[class^="btn-"] 这类写法可以做个标记，等浏览器支持后直接替换成 .btn-*。

3. 设计系统文档更新：在组件文档里加上 @supports selector(.btn-*) 渐进增强注释，方便以后迁移。

CSS 这门语言正在变得越来越懂开发者的意图，类前缀选择器就是又一个证据——它不是语法糖，而是把一个社区里口口相传的「前缀命名约定」正式纳入了浏览器引擎的理解范畴。