有序列表编号补全的实现
<style>.artBox { margin: 20px auto; max-width: 1200px; font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
</style>
<div class="artBox">
<p>HTML有序列表 <code><ol></code> 默认使用阿拉伯数字做编号。编号实际上是列表的 marker，比如圆点、符号、数字或自定义计数器样式等。有序列表的 marker 标识可以视为天然的编号，可由一系列可以用来表达序列的数字、字母、自定义符号等等表示，也可以不要编号。编号使用 list-style-type 属性定义：</p>
<pre><code>/* 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; /* 英文小写 */</code></pre>
<p>来看一个完整示例，默认编号的有序列表：</p>
<pre><code class="hcode"><style>
.ol-1 {
list-style-type: decimal; /* decimal是默认值，本句可以缺省 */
}
</style>
<ol class="ol-1">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol></code></pre>
<p>效果：</p>
<div class="pshow"></div>
<p>在上例的基础上，如果我们需要给有序列表的编号补零，实现起来并不简单，但也不算太复杂，思路是：一、清除 ol 有序列表的默认样式；二、在 ol 选择器中使用 counter-increment 属性创建一个递增计数器（该属性值可接收计数器名称和计数初始值两个参数）；三、在 li 选择器中启用递增计数器；四、给 li 元素创建 ::before 伪元素，在它上面通过 content 属性渲染递增计数器，这个会用到 decimal-leading-zero 参数即数字前导补零参数。看代码：</p>
<pre><code class="hcode"><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></code></pre>
<p>效果演示：</p>
<div class="pshow"></div>
<p>这个实现案例只能在编号的前面补一个零，适用于两位数编号的有序列表。</p>
<p>实现多位数编号的补零，需要在CSS中创建一个
<code>@counter-style</code> 规则，该规则允许定义一个计数器的值如何转化为字符串表示法：通过 system 属性指定一个算法，用于将计数器的整数值转化为字符串表示，再使用 pad 属性定义具体补全规则。像这样：
</p>
<pre><code>/* 定义补全规则（方法和定义CSS关键帧动画接近） */
@counter-style pad-num {
system: extends numeric; /* CSS扩展数字算法 */
pad: 3 '0'; /* 补全规则 : 3位数，补 0 */
}</code></pre>
<p>然后，在 li::before 伪元素选择器的 content 属性更改
<code>decimal-leading-zero</code> 前导补零参数为上述定义的
<code>pad-num</code> 参数即可实现预期效果。看完整代码：
</p>
<pre><code class="hcode"><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></code></pre>
<p>效果如下：</p>
<div class="pshow"></div>
<p>本文仅展示有序列表编号补全的实现方法，里面所涉及到的知识点每一个都可能是可以无限扩展和延伸的，这显然超出了文章的探讨范畴——文章的目的仅在实现演示，不做理论层面的详细研究，希望读者能从中获得启发、为后续更广阔的应用准备最为基础的知识点以及实现思路。</p>
</div>
<script>
var hcodes = document.querySelectorAll('.hcode');
var pshows = document.querySelectorAll('.pshow');
pshows.forEach((pshow,k) => pshow.innerHTML = hcodes.innerText);
</script> 又是个有些复杂的内容，不只补零有什么作用，但补起来还真的挺不容易的。
{:4_187:} 给有序列表编号补0，并不太容易呢，谢谢马老师给出可行的实现思路与方法。{:4_180:} 红影 发表于 2026-4-1 14:53
又是个有些复杂的内容，不只补零有什么作用，但补起来还真的挺不容易的。
补零一般来说是排版需要，例如数字对齐。很多场景这个并非特殊需求，而是刚性要求。 杨帆 发表于 2026-4-1 17:31
给有序列表编号补0，并不太容易呢，谢谢马老师给出可行的实现思路与方法。
{:4_190:} 马黑黑 发表于 2026-4-1 17:50
补零一般来说是排版需要，例如数字对齐。很多场景这个并非特殊需求，而是刚性要求。
还好玩的时候它不是刚需{:4_173:}
页:
[1]