html 中 `

` 的序号中断（始终显示为 1）通常源于非法嵌套：`
` 或 `

` 必须直接作为 `
• ` 的子元素，而非并列于 `
• ` 外部；否则浏览器会重置计数器。本文详解合法嵌套规则、修复方法及最佳实践。

  在 HTML 规范中，有序列表

  的连续编号依赖严格的嵌套结构
  ：所有子列表（无论
  还是
  ）必须嵌套在父列表项
  • 内部
  ，而不能与
  • 并列置于同一层级。你原始代码的问题正在于此——例如：

    <ul class="a">
      <li>General Aviation (piston-driven engines)</li>
      <ol class="f"> <!-- ❌ 错误：ol 直接放在 ul 下，未包裹在 li 中 -->
        <li>Single-Engine Aircraft</li>
      </ol>
      <ul>
        <ol class="u"> <!-- ❌ 同样错误：ul 和 ol 并列，破坏 ol 计数上下文 -->
          <li>Tail wheel</li>
          <li>Tricycle</li>
        </ol>
      </ul>
    </ul>

    这种写法违反了 HTML 的内容模型（

    /
    只能包含
    • ，不能直接作为
      的兄弟元素），导致浏览器将每个孤立的
      视为全新列表，强制从 1 开始计数。

      ✅ 正确做法是：将子

      或
      作为上一级
      • 的直接子元素
      。例如，“General Aviation”这一项本身应包含其所有子分类（含数字编号项和罗马字母项），结构如下：

      <ul class="a">
        <li>General Aviation (piston-driven engines)
          <ol class="f"> <!-- ✅ 正确：ol 是 li 的子元素 -->
            <li>Single-Engine Aircraft
              <ol class="u"> <!-- ✅ 子列表继续嵌套在对应 li 内 -->
                <li>Tail wheel</li>
                <li>Tricycle</li>
              </ol>
            </li>
            <li>Dual-Engine Aircraft
              <ol class="t">
                <li>Wing-mounted engines</li>
                <li>Push-pull fuselage-mounted engines</li>
              </ol>
            </li>
          </ol>
        </li> <!-- 注意：这个闭合标签至关重要 -->
      </ul>

      ? 关键原则：每个 的编号序列由其最近的、合法的父 定义；脱离 上下文的 将被重置。

      此外，建议优化以下细节提升可维护性与语义准确性：

      
      使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
      使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
      下载

      立即学习“前端免费学习笔记（深入）”；

      • 弃用过时标签： 已被 HTML5 废弃，推荐使用 CSS 控制文本样式（如 h2 { font-family: Arial, sans-serif; color: #add8e6; font-size: 2.5rem; }）；
      • 移除冗余包装：避免无意义的
        ...
      套层，直接使用语义匹配的列表；
    • CSS 类复用：.f 等类名可简化为更具语义的名称（如 .decimal），或直接使用内联 type="1"（但推荐 CSS 控制）；
    • 验证结构：使用 W3C Markup Validator 检查嵌套合法性。

    最终修正后的完整结构示例（精简清晰版）：

    <div>
      <h2 style="font-family: Arial, sans-serif; color: #add8e6; font-size: 2.5rem; margin: 0 0 1em 0;">
        Aircraft Types
      </h2>
      <ul class="a">
        <li>General Aviation (piston-driven engines)
          <ol class="f">
            <li>Single-Engine Aircraft
              <ol class="u">
                <li>Tail wheel</li>
                <li>Tricycle</li>
              </ol>
            </li>
            <li>Dual-Engine Aircraft
              <ol class="t">
                <li>Wing-mounted engines</li>
                <li>Push-pull fuselage-mounted engines</li>
              </ol>
            </li>
          </ol>
        </li>
      </ul>
      <ul class="a">
        <li>Commercial Aviation (jet engines)
          <ol class="f">
            <li>Dual Engine
              <ol class="p">
                <li>Wing-mounted engines</li>
                <li>Fuselage-mounted engines</li>
              </ol>
            </li>
            <li>Tri-Engine
              <ol class="q">
                <li>Third engine in vertical stabilizer</li>
                <li>Third engine in fuselage</li>
              </ol>
            </li>
          </ol>
        </li>
      </ul>
    </div>

    ✅ 此结构确保所有

    均处于有效
    1. 上下文中，浏览器将自动按顺序渲染 1., 2., 3.…，子列表也依层级正确继承编号类型。记住：HTML 列表的“序号连续性”本质是 DOM 结构的产物，而非 CSS 属性可单独修复的问题。