CSS @counter-style 怎样为编号补齐固定位数

我第一次用 CSS 自定义有序列表编号，是在一个目录组件里遇到“1、2、3 看着太松散”的时候。需求其实很小：编号要显示成 01、02、03，但不能把 10 错误地截成 10 以外的格式。这个场景适合交给 @counter-style，核心只是一条 pad 描述符。

一、@counter-style 与 pad 的最小实现

@counter-style 负责声明一个可复用的计数器名称。对于十进制补零，最容易读懂的组合是 numeric、0 到 9 的 symbols，再加上 pad。下面这段 CSS 可以直接放进页面样式中：

@counter-style fixed-decimal {
  /* 用十进制算法解释列表编号。 */
  system: numeric;
  /* 为 numeric 提供 0 到 9 的数字符号。 */
  symbols: 0 1 2 3 4 5 6 7 8 9;
  /* 让不足两位的结果在左侧补 0。 */
  pad: 2 "0";
  /* 保留列表标记与正文之间的可读间距。 */
  suffix: ". ";
}

.chapter-list {
  /* 把自定义计数器绑定到有序列表。 */
  list-style-type: fixed-decimal;
}

再给一个普通的 ol 加上 chapter-list 类，前两项就会显示为 01、02。这里的 suffix 只负责编号后的标点和空格，不参与数字本身的补齐。

二、pad 的边界：补齐最小长度，不负责截断

这条规则最容易被误解成“固定输出两位”。实际上，pad 规定的是 marker representation 的最小长度。编号长度不够时才补前导符号，已经达到或超过长度时按原样表示。

我在目录编号里通常把它理解成“对齐下限”，而不是格式化器的截断开关。若业务真的要求永远只有两位，就不能只依赖 CSS 计数器，还要先限制数据范围，或在生成内容时把编号处理成字符串。

三、旧列表迁移时要检查的三个点

如果页面原来使用 list-style-type: decimal-leading-zero，可以先把视觉需求迁移到自定义计数器，但不要只看静态样式表。第一，确认列表是否需要从非 1 的起点开始；start 或计数器重置会改变输入值，补零规则本身不会替你修正起点。第二，确认是否存在负数、超出 range 的编号；自定义样式可以配合 negative、range 和 fallback 处理这些边界。第三，给没有应用自定义样式的降级状态留出可读性，至少保证内容顺序不依赖编号的视觉宽度。

兼容性上，MDN 将 @counter-style 标为广泛可用，并说明跨浏览器可用时间从 2023 年 9 月开始；但某些描述符仍可能存在实现差异。生产页面可先在目标浏览器中验证 numeric、pad 和列表标记的组合，再决定是否加回退样式。

四、最小验证清单

• 列表第一项是 01，第二项是 02，第九项是 09。
• 第十项仍是 10，超过两位的编号没有被截断。
• 修改 start 后，编号从新的输入值继续计算。
• 移除自定义规则后，正文顺序和可读性仍然成立。

这套写法适合章节目录、步骤编号和需要等宽视觉对齐的短列表。对数据表主键、订单号这类业务标识，我更愿意在数据层生成完整字符串，再把 CSS 只当作展示层补充。

相关问题

pad: 2 "0" 能把 123 变成 12 吗？

不能。它只保证最小长度为 2，三位数会保持为 123，不会截断。

symbols 可以省略吗？

在 system: numeric 下不能省略，因为 numeric 系统需要一组符号来构造表示。

CSS 补零和 JavaScript 补零怎么选？

只影响列表标记时优先 CSS；编号要参与复制、提交、排序或接口传输时，在数据或模板层生成字符串更稳妥。