html 中嵌套列表序号中断（如所有 `

` 都显示为“1.”）通常源于非法 dom 结构：`
` 和 `

` 必须直接作为 `
• ` 的子元素，而不能并列置于父 `
  ` 内部——否则浏览器会自动闭合前一个列表、重置计数器。本文详解合法嵌套规则与样式控制技巧。

  在 HTML 规范中，有序列表

  和无序列表
  只能合法地嵌套在
  • 元素内部
  ，而不能作为兄弟节点直接跟在
  • 后面、平级置于同一父
    或
    中。你原始代码的问题正在于此：

    <ul class="a">
      <li>General Aviation (piston-driven engines)</li>
      <ol class="f"> <!-- ❌ 错误：ol 不在 li 内部，而是与 li 并列 -->
        <li>Single-Engine Aircraft</li>
      </ol>
      <ul> <!-- ❌ 同样错误 -->
        <ol class="u">...</ol>
      </ul>
      <ol class="f"> <!-- ❌ 每个 ol 都被浏览器视为新列表，计数器重置为 1 -->
        <li>Dual-Engine Aircraft</li>
      </ol>
    </ul>

    这种写法违反了 HTML 的内容模型（Content Model）：

    的直接子元素只能是
    • ；任何
    、
    或块级元素若未包裹在
    • 中，均会被浏览器自动修正（如插入隐式
    、开启新列表），导致计数器反复重置，最终所有
    都从 1. 开始。

    ✅ 正确做法是：将每个嵌套的

    或
    作为其对应
    • 的子元素
    。例如：

    <ul class="a">
      <li>General Aviation (piston-driven engines)
        <ol class="f"> <!-- ✅ 正确：ol 是 li 的直接子元素 -->
          <li>Single-Engine Aircraft
            <ol class="u">
              <li>Tail wheel</li>
              <li>Tricycle</li>
            </ol>
          </li> <!-- Single-Engine 的 li 结束 -->
          <li>Dual-Engine Aircraft
            <ol class="t">
              <li>Wing-mounted engines</li>
              <li>Push-pull fuselage-mounted engines</li>
            </ol>
          </li> <!-- Dual-Engine 的 li 结束 -->
        </ol>
      </li> <!-- General Aviation 的 li 结束 -->
    </ul>

    这样，外层

    
    使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
    使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
    下载
    中的两个
    1. 将依次显示为 1. 和 2.，其内部嵌套列表也自然继承层级逻辑。

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

       ? 关键注意事项：

       • 不要使用已废弃的 标签（如示例中的 ），应改用 CSS 控制字体（如 font-family: Arial, sans-serif; font-size: 2em; color: lightblue;）；
       • 类选择器（如 .f, .u）仅控制样式，不影响计数逻辑；计数是否连续完全取决于 HTML 结构合法性；
       • 若需跨多个父
       • 共享同一计数序列（如“1. A → 2. B → 3. C”，即使它们属于不同顶级
       • ），则需使用 CSS counter-reset/counter-increment 配合 ::before 伪元素实现，但语义上已不属于标准嵌套列表，需谨慎评估可访问性与 SEO 影响。

       ? 总结：
       让

       序号连续递增，核心不是调整 CSS，而是修复 HTML 结构——确保每个
       或
       都严格嵌套在
       • 内部。遵循这一原则，配合你已定义的 .f（decimal）、.u（upper-roman）等类，即可生成语义清晰、样式可控、计数准确的多级列表。