有序列表编号补全的实现

马黑黑

HTML有序列表 <ol> 默认使用阿拉伯数字做编号。编号实际上是列表的 marker，比如圆点、符号、数字或自定义计数器样式等。有序列表的 marker 标识可以视为天然的编号，可由一系列可以用来表达序列的数字、字母、自定义符号等等表示，也可以不要编号。编号使用 list-style-type 属性定义：

/* ol 选择器 list-style-type 属性设置 */
    list-stype-type: none;        /* 不显示编号 */
    list-style-type: decimal;     /* 数字（默认） */
    list-style-type: upper-roman; /* 罗马大写 */
    list-style-type: lower-roman; /* 罗马小写 */
    list-style-type: upper-alpha; /* 英文大写 */
    list-style-type: lower-alpha; /* 英文小写 */

来看一个完整示例，默认编号的有序列表：

<style>
    .ol-1 {
        list-style-type: decimal; /* decimal是默认值，本句可以缺省 */
    }
</style>
<ol class="ol-1">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ol>

效果：

在上例的基础上，如果我们需要给有序列表的编号补零，实现起来并不简单，但也不算太复杂，思路是：一、清除 ol 有序列表的默认样式；二、在 ol 选择器中使用 counter-increment 属性创建一个递增计数器（该属性值可接收计数器名称和计数初始值两个参数）；三、在 li 选择器中启用递增计数器；四、给 li 元素创建 ::before 伪元素，在它上面通过 content 属性渲染递增计数器，这个会用到 decimal-leading-zero 参数即数字前导补零参数。看代码：

<style>
    .ol-2 {
        list-style-type: none; /* 取消默认编号 */
        counter-increment: counter-No1 0; /* 创建递增计数器，参数 0 为起始值 */
    }
    .ol-2 li {
        counter-increment: counter-No1; /* 启用递增计数器 : 注意名称和上面创建的一致 */
        padding-left: 2.5em; /* 给编号预留空间 */
        position: relative; /* 约束伪元素定位 */
    }
    .ol-2 li::before {
        content: counter(counter-No1, decimal-leading-zero); /* 关键 ：添加前导零 */
        position: absolute; /* 绝对定位便于布局 */
        width: 2em; /* 宽度 */
        left: 0; /* 定位 */
        text-align: center; /* 文本居中 */
    }
</style>

<ol class="ol-2">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ol>

效果演示：

这个实现案例只能在编号的前面补一个零，适用于两位数编号的有序列表。

实现多位数编号的补零，需要在CSS中创建一个 @counter-style 规则，该规则允许定义一个计数器的值如何转化为字符串表示法：通过 system 属性指定一个算法，用于将计数器的整数值转化为字符串表示，再使用 pad 属性定义具体补全规则。像这样：

/* 定义补全规则（方法和定义CSS关键帧动画接近） */
@counter-style pad-num {
    system: extends numeric; /* CSS扩展数字算法 */
    pad: 3 '0';              /* 补全规则 : 3位数，补 0 */
}

然后，在 li::before 伪元素选择器的 content 属性更改 decimal-leading-zero 前导补零参数为上述定义的 pad-num 参数即可实现预期效果。看完整代码：

<style>
    .ol-3 {
        list-style-type: none; /* 取消默认编号 */
        counter-increment: counter-No2 98; /* 递增计数器 : 参数 98 为初始值 */
    }
    .ol-3 li {
        counter-increment: counter-No2; /* 启用递增计数器 */
        padding-left: 3em; /* 给编号预留空间 : 注意根据位数调整 */
        position: relative; /* 约束伪元素定位 */
    }
    .ol-3 li::before {
        content: counter(counter-No2, pad-num); /* 关键：添加前导零 */
        position: absolute; /* 绝对定位便于布局 */
        width: 2.5em; /* 宽度 : 注意根据位数调整 */
        left: 0; /* 定位 */
        text-align: center; /* 文本居中 */
    }
    /* 设置补全规则 : pad-num 为自定义名称 */
    @counter-style pad-num {
        system: extends numeric;
        pad: 3 "0"; /* 需要四位数的把 3 改为 4 */
    }
</style>
<ol class="ol-3">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ol>

效果如下：

本文仅展示有序列表编号补全的实现方法，里面所涉及到的知识点每一个都可能是可以无限扩展和延伸的，这显然超出了文章的探讨范畴——文章的目的仅在实现演示，不做理论层面的详细研究，希望读者能从中获得启发、为后续更广阔的应用准备最为基础的知识点以及实现思路。

红影

又是个有些复杂的内容，不只补零有什么作用，但补起来还真的挺不容易的。