html 中 `
- ` 的序号中断（始终显示为 1）通常源于非法嵌套：`
- ` 或 `
- ` 必须直接作为 `
- ` 的子元素，而非并列于 `
- ` 外部；否则浏览器会重置计数器。本文详解合法嵌套规则、修复方法及最佳实践。
在 HTML 规范中，有序列表 <ol> 的连续编号依赖严格的嵌套结构：所有子列表（无论 <ol> 还是 <ul>）必须嵌套在父列表项 <li> 内部，而不能与 <li> 并列置于同一层级。你原始代码的问题正在于此——例如：
<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 的内容模型（<ol>/<ul> 只能包含 <li>，不能直接作为 <ul> 的兄弟元素），导致浏览器将每个孤立的 <ol> 视为全新列表，强制从 1 开始计数。
✅ 正确做法是：将子 <ol> 或 <ul> 作为上一级 <li> 的直接子元素。例如，“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>? 关键原则：每个 <ol> 的编号序列由其最近的、合法的父 <li> 定义；脱离 <li> 上下文的 <ol> 将被重置。
此外，建议优化以下细节提升可维护性与语义准确性：
立即学习“前端免费学习笔记（深入）”；
- 弃用过时标签：<font> 已被 HTML5 废弃，推荐使用 CSS 控制文本样式（如 h2 { font-family: Arial, sans-serif; color: #add8e6; font-size: 2.5rem; }）；
- 移除冗余包装：避免无意义的 <ul><ol>...</ol></ul> 套层，直接使用语义匹配的列表；
- 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>✅ 此结构确保所有 <ol> 均处于有效 <li> 上下文中，浏览器将自动按顺序渲染 1., 2., 3.…，子列表也依层级正确继承编号类型。记住：HTML 列表的“序号连续性”本质是 DOM 结构的产物，而非 CSS 属性可单独修复的问题。
