法律条文多级编号必须用CSS计数器实现,浏览器原生ol嵌套不继承前缀;start属性控制起始数字,需配合type使用;value仅局部覆盖,应谨慎使用。

法律条款需要多级编号,ol 嵌套本身不自动继承前缀
浏览器原生 ol 只支持单层线性编号(1、2、3… 或 a、b、c…),嵌套时子 ol 默认从 1 重新开始,不会自动变成 1.1、1.1.1。法律条文常见的“第十二条 → 第十二条第一款 → (一)项”这类结构,必须靠 CSS 计数器显式定义层级关系。
直接写两层 ol 是无效的:
<ol>
<li>第一条</li>
<ol>
<li>第一款</li>
</ol>
</ol>
这样第二层会显示为 “1. 第一款”,而非 “1.1. 第一款”。关键不是嵌套标签,而是用 counter-reset 和 counter-increment 把父级编号“传下去”。
start 属性只控制起始数字,不是“跳过前N项”
法律文本常需续接编号,比如上一章末尾是“第一百零五条”,本章从“第一百零六条”开始。这时该用 start="106",而不是手动在每个 li 上加 value。
立即学习“前端免费学习笔记(深入)”;
-
<ol start="106">→ 渲染为 “106.” “107.” “108.” - 误写
<ol start="106" type="I">→ 显示 “CVI.” “CVII.” “CVIII.”(罗马数字 106 是 CVI),不是 “I.” “II.” -
start支持负数和零,但不能是小数或字母;type必须配合使用才有效,单独设start且type不匹配,编号语义就断了
用 CSS 计数器实现 1.1、1.1.1 这类多级编号
核心是给每层 ol 设置独立计数器,并在 li::before 中组合拼接。不需要 JS,纯 CSS 即可。
示例:实现“2.3.1”格式
ol {
counter-reset: section;
}
ol ol {
counter-reset: subsection;
}
ol ol ol {
counter-reset: subsubsection;
}
li::before {
counter-increment: section;
content: counters(section, ".") ". ";
}
ol ol li::before {
counter-increment: subsection;
content: counters(section, ".") "." counters(subsection, ".") ". ";
}
ol ol ol li::before {
counter-increment: subsubsection;
content: counters(section, ".") "." counters(subsection, ".") "." counters(subsubsection, ".") ". ";
}
注意:counters() 第二个参数是分隔符,不是样式;counter-reset 必须写在父容器上,否则子层无法继承;如果某层想用汉字“一、二、三”,得额外加 list-style-type: cjk-ideographic 配合,但语义不如计数器可控。
value 属性只用于局部覆盖,滥用会导致编号断裂
value 是 li 的属性,作用仅限于“把这一项强制设为某个值”,后续项仍按此值 +1 自增。它不是补编号漏洞的工具。
- 在
<ol start="5">里,第一个li写value="1"→ 编号变成 “1.” “2.” “3.”,彻底绕过start - 用
value强行对齐视觉(比如让所有编号右对齐)→ 这该用 CSS 的text-align或padding-left控制,不是改语义编号 - 真正需要跳变的场景极少,比如某条被删除后空出一个号,下一条要接上原序号(如删掉 3 后,4 要显示为 “4.” 而非 “3.”),此时才用
value="4"
法律文本对编号连续性和可引用性要求极高,value 应视为手术刀,不是创可贴——动之前先确认 DOM 结构、start 设置、CSS 计数器是否已覆盖全部路径。



















