HTML嵌套有序列表编号异常：Section1.2显示III而非II的问题

嘿，我来帮你搞定这个目录编号的问题！你遇到的Section1.2显示为III而非II的情况，根源在于列表嵌套结构不符合HTML规范——子列表没有被包裹在父列表的<li>元素内部，浏览器为了修复无效的DOM结构，自动插入了额外的列表项，导致编号序列被打乱。

问题分析 #

你原代码的结构中，章节（Chapter One）的<li>之后直接跟着小节列表（<ol type="I">），而小节里的子主题列表（<ol type="i">）也直接放在了小节的<li>之后，没有嵌套到对应的<li>内部。这种情况下，浏览器会把这些“游离”的列表当成独立的列表项，占用了编号计数，最终导致Section1.2的编号跳到了III。

修正后的代码 #

正确的做法是所有子列表必须嵌套在父列表的<li>标签内部，这样每个有序列表的编号才会独立且正确递增：

<h1>Table of Contents For My Book</h1>
<ol>
  <!-- 章节1的li内部包含标题和小节列表 -->
  <li>Chapter One
    <ol type="I">
      <!-- 小节1.1的li内部包含标题和子主题列表 -->
      <li>Section 1.1
        <ol type="i">
          <li>First Topic</li>
          <li>Second Topic
            <!-- 子主题的无序列表嵌套在对应的li内部 -->
            <ul>
              <li>subtopic 1</li>
              <li>subtopic 2</li>
            </ul>
          </li>
        </ol>
      </li>
      <li>Section1.2</li>
      <li>Section1.3</li>
    </ol>
  </li>
</ol>

为什么这样修改有效？ #

通过将子列表完全包裹在父列表项的<li>内部，浏览器会正确识别列表的层级关系：

1. 最外层<ol>控制章节编号（这里是数字1）
2. 章节内部的<ol type="I">控制小节编号，从I开始递增，Section1.1是I，Section1.2自然就是II
3. 小节内部的<ol type="i">控制子主题编号，不会干扰外层的小节编号

这样修改后，你的目录编号就会完全符合预期啦！

内容的提问来源于stack exchange，提问作者Rana Shaharyar