HTML 中实现带自定义起始编号的嵌套有序列表（如 2.1、2.2、2.3）-html教程-PHP中文网

HTML 中实现带自定义起始编号的嵌套有序列表（如 2.1、2.2、2.3）

本文介绍如何使用 CSS counters() 函数结合 HTML start 属性，精准生成带层级前缀（如 2.1、2.2）的嵌套有序列表，无需手动重置计数器，且自动继承外层起始值。

本文介绍如何使用 css `counters()` 函数结合 html `start` 属性，精准生成带层级前缀（如 `2.1`、`2.2`）的嵌套有序列表，无需手动重置计数器，且自动继承外层起始值。

在 HTML 中构建类似文档章节编号（如 1.1、2.3.2）的嵌套有序列表时，若依赖 <ol start="N"></ol> 设置外层起始值，但希望内层列表自动继承并拼接该值（例如外层 start="2" → 内层显示 2.1、2.2），关键在于复用浏览器内置的 list-item 计数器，而非手动声明 counter-reset。

list-item 是 <ol></ol> 和 <ul></ul> 元素默认关联的内置计数器，其值由 start 属性、<li> 顺序及嵌套层级共同决定。配合 counters(counter-name, separator) 函数，可递归输出多级编号。

✅ 正确做法如下：

ol {
  list-style-type: none; /* 移除默认数字，避免与伪元素冲突 */
  margin-bottom: 1em;
}
ol ol li::before {
  content: counters(list-item, ".") " "; /* 自动拼接所有上级 list-item 值，用点分隔 */
  display: inline-block;
  width: 3em; /* 可选：对齐文本内容 */
  margin-right: 0.5em;
}
/* 可选：确保子列表项文本正常缩进 */
ol ol {
  padding-left: 0;
  margin-left: 1.5em;
}
ol ol li {
  margin-bottom: 0.4em;
}

对应 HTML 结构（注意：外层 <li> 必须直接包裹内层 <ol></ol>，不可额外添加文字或标签）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<ol start="2">
<li>
    <ol>
<li>Item<br>...some Text...</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
</li>
  <li>
    <ol>
<li>Another Item</li>
      <li>Yet Another Item</li>
    </ol>
</li>
</ol>

渲染效果为：

2.1 Item
    ...some Text...
2.2 Item
2.3 Item
3.1 Another Item
3.2 Yet Another Item

⚠️ 注意事项：

不要对 ol 设置 counter-reset：否则会覆盖内置 list-item 计数器，导致 counters(list-item, ".") 失效；
counters() 区分大小写：必须写作 counters（复数），且参数名 list-item 中的连字符不可省略；
若需跳过某层编号（如仅显示最内层 1.1 而非 2.1.1），应改用自定义计数器 + counter-increment 手动控制；
浏览器兼容性良好（Chrome 2+、Firefox 1.5+、Safari 3.1+、Edge 12+），无兼容性风险。