如何处理HTML有序列表编号不连续问题-html教程-PHP中文网

ol嵌套后第二级全显示为“1.”是因为子ol未作为li的直接子元素，导致浏览器自动纠错重置计数器；正确做法是将子ol完整包裹在li内，确保dom结构合法。

如何处理html有序列表编号不连续问题

ol 编号不连续，基本不是浏览器 bug，而是 DOM 结构非法导致浏览器自动“纠错”——它会闭合前一个 ol、开启新列表，于是所有子 ol 都从 1 开始。修复只需一条铁律：子列表必须作为 li 的直接子元素，不能平级挂在父 ol 下。

为什么 `ol` 嵌套后第二级全显示为 “1.”？

常见错误是把子 ol 写在父 ol 内部但脱离 li，例如：

<ol type="A">
<li>A. First item</li>
</ol><ol type="1">
<!-- ❌ 独立标签，不在任何 <li> 里 --><li>1. Sub-item</li>
</ol>

浏览器解析时，会把第二个 ol 当作全新列表处理，计数器重置。结果就是每个 ol type="1" 都从 1. 开始，且与上一级完全断连。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

HTML 规范明确要求：ol 和 ul 只能作为 li 的子元素（或另一个 ol/ul 的子元素），不能是 ol 的兄弟节点
DevTools 里常能看到被自动插入的隐式 <ol></ol>，这就是浏览器在“修复”非法结构
屏幕阅读器也会跳过这些孤立列表项，语义完全丢失

如何让 A. → 1. → a. 连续编号并正确嵌套？

关键不是加 CSS，而是先写对 HTML 结构。子 ol 必须完整包裹在某个 li 内部，且层级关系清晰：

<ol type="A">
<li>A. First item
    <ol type="1">
<li>1. Sub-item
        <ol type="a">
<li>a. Detail</li>
          <li>b. Detail</li>
        </ol>
</li>
      <li>2. Sub-item</li>
    </ol>
</li>
  <li>B. Second item <!-- ✅ 自动显示为 B. -->
    <ol type="1">
<li>1. Sub-item</li>
    </ol>
</li>
</ol>

外层 type="A" 控制主级，li 内嵌 ol type="1" 控制次级，再内嵌 ol type="a" 控制末级
不需要 JavaScript 或 CSS counter，纯原生即可实现跨层级连续（A → B → C，而非重复 A）
如果某条主项不含子列表，就不要放空 ol，避免结构冗余

如何控制起始编号（比如从 34. 开始）？

用 start 属性，而不是手动写数字或靠 CSS 模拟：

<ol start="34">
<li>Only live players playing in a set may be inside the boundaries...</li>
  <li>If any part of a live player touches a boundary line...</li>
  <li>If any part of a live player touches a surface...
    <ol type="a">
<li>That player may pass any balls...</li>
      <li>That player may not intentionally touch...</li>
    </ol>
</li>
</ol>