如何正确嵌套 HTML 有序列表以实现连续递增的十进制编号

html 中嵌套 `

` 列表时，若将 `
` 直接置于 `

` 的 `
• ` 外部（如兄弟元素），浏览器会将其视为多个独立列表，导致编号重置为 1；正确做法是将子 `
  ` 严格嵌套在父 `
  1. ` 内部，才能继承并延续序号。

     在 HTML 规范中，有序列表 <ol> 的编号连续性完全依赖于其 DOM 结构层级：只有当多个 <li> 元素属于同一个 <ol> 父容器时，编号才会自动递增（1 → 2 → 3…）。而一旦 <ol> 被错误地放在 <ul> 内但脱离 <li> 上下文（例如紧随 <li> 后作为同级标签），它就成为一个全新的、孤立的列表——无论 CSS 类名是否相同，编号都会从 1 重新开始。

     你原始代码的问题正在于此：

     <ul class="a">
       <li>General Aviation (piston-driven engines)</li>
       <ol class="f"> <!-- ❌ 错误：此 ol 不在任何 li 内，是 ul 的直接子元素 -->
         <li>Single-Engine Aircraft</li>
       </ol>
       <ol class="f"> <!-- ❌ 同样错误：另一个独立 ol，编号再次从 1 开始 -->
         <li>Dual-Engine Aircraft</li>
       </ol>
     </ul>

     上述写法违反了 HTML 列表嵌套语义——<ol> 和 <ul> 只能包含 <li>（以及 <script>/<template> 等特殊元素），不能直接混排在父列表项之外。这不仅导致编号中断，还使 HTML 结构无效（W3C 验证失败）。

     ✅ 正确嵌套方式如下（关键原则：子列表必须是某一个 <li> 的内部内容）：

     

     Otter.ai

     一个自动的会议记录和笔记工具，会议内容生成和实时转录

     下载

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

     <ul class="a">
       <li>General Aviation (piston-driven engines)
         <!-- ✅ 正确：ol 是该 li 的子元素 -->
         <ol class="f">
           <li>Single-Engine Aircraft</li>
           <ol class="u">
             <li>Tail wheel</li>
             <li>Tricycle</li>
           </ol>
           <li>Dual-Engine Aircraft</li> <!-- 编号自动变为 2 -->
           <ol class="t">
             <li>Wing-mounted engines</li>
             <li>Push-pull fuselage-mounted engines</li>
           </ol>
         </ol>
       </li> <!-- li 闭合位置至关重要 -->
     </ul>

     ? 注意事项与最佳实践：

     • 语义优先：避免使用过时的 <font> 标签（已废弃），改用 CSS 控制字体、颜色和大小（如 font-family: Arial; font-size: 2em; color: #add8e6;）；
     • CSS 类复用更安全：无需为每个 <ol> 单独定义 .f 类，可统一用 ol { list-style-type: decimal; }，再通过嵌套选择器微调（如 ol ol { list-style-type: upper-roman; }）；
     • 验证结构：使用 W3C Markup Validator 检查 HTML 是否符合标准，及时发现非法嵌套；
     • 无障碍友好：正确嵌套确保屏幕阅读器能准确播报层级关系（如 “列表项 1，子列表，罗马数字一…”）。

     ? 总结：HTML 列表编号不是由 CSS 驱动，而是由 DOM 层级决定。要获得连续十进制编号，请始终确保所有 <li> 属于同一个 <ol>，并将子列表（<ol> 或 <ul>）作为父 <li> 的直接子元素嵌入——结构即逻辑，语义即功能。