如何在CSS类名中编码数值以实现纯CSS对任意数值范围的样式匹配？

确实存在无需JS/后端介入、也不需要预生成全量数值类的纯CSS实现方案，核心依赖固定位数的类名命名规范+CSS属性选择器的前缀匹配能力实现，兼容性覆盖几乎所有主流浏览器。

1. 类名命名规则 #

所有带数值的类名统一遵循{前缀}-{固定位数补零的数值}格式：

• 前缀选项目内唯一的字符串，避免和其他类名冲突，例如进度场景用progress-val-
• 数值根据最大可能值固定位数，不足位数补前导零：
  • 0-100的百分比场景固定2位：5%写成progress-val-05，32%写成progress-val-32，100%单独保留三位progress-val-100
  • 0-1000的数值场景固定3位：9%写成progress-val-009，245%写成progress-val-245

2. 范围匹配CSS实现 #

以前文提到的进度条颜色需求为例（<50%红，50%-79%黄，≥80%绿），只需写以下CSS即可：

/* 匹配0-49%：0/1/2/3/4开头的两位数值 */
[class*="progress-val-0"],
[class*="progress-val-1"],
[class*="progress-val-2"],
[class*="progress-val-3"],
[class*="progress-val-4"] {
  background: #f43f5e;
}

/* 匹配50-79%：5/6/7开头的两位数值 */
[class*="progress-val-5"],
[class*="progress-val-6"],
[class*="progress-val-7"] {
  background: #eab308;
}

/* 匹配80-100%：8/9开头的两位数值 + 100%特殊值 */
[class*="progress-val-8"],
[class*="progress-val-9"],
.progress-val-100 {
  background: #22c55e;
}

3. 方案优势 #

• 不需要预生成上百条CSS规则，代码量仅和阈值数量成正比，和数值范围大小无关
• 调整阈值仅需修改CSS选择器，无需改动前端渲染逻辑、后端输出逻辑或者类名规范
• 兼容性极强，CSS2级的属性选择器已被所有主流浏览器支持，不需要依赖新CSS特性
• 不需要额外的JS运行时逻辑，不会产生性能开销

现有替代方案对比 #

目前业内常用的其他方案各有适用场景，但灵活性均低于上述纯CSS方案：

• 服务端输出语义类：阈值调整需要同步修改后端逻辑，迭代成本高
• 前端JS动态加类：需要额外维护JS判断逻辑，数值更新时需要同步修改类名
• nth-child匹配：仅适用于子元素数量对应数值的场景，无法适配通用数值绑定需求，也无法选中父元素

内容的提问来源于stack exchange，提问作者David Scotson