html 中嵌套列表序号中断（如所有 `
- ` 都显示为“1.”）通常源于非法 dom 结构：`
- ` 和 `
- ` 必须直接作为 `
- ` 的子元素，而不能并列置于父 `
- ` 内部——否则浏览器会自动闭合前一个列表、重置计数器。本文详解合法嵌套规则与样式控制技巧。
在 HTML 规范中，有序列表 <ol> 和无序列表 <ul> 只能合法地嵌套在 <li> 元素内部，而不能作为兄弟节点直接跟在 <li> 后面、平级置于同一父 <ul> 或 <ol> 中。你原始代码的问题正在于此：
<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）：<ul> 的直接子元素只能是 <li>；任何 <ol>、<ul> 或块级元素若未包裹在 <li> 中，均会被浏览器自动修正（如插入隐式 </ul>、开启新列表），导致计数器反复重置，最终所有 <ol> 都从 1. 开始。
✅ 正确做法是：将每个嵌套的 <ol> 或 <ul> 作为其对应 <li> 的子元素。例如：
<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>这样，外层 <ol class="f"> 中的两个 <li> 将依次显示为 1. 和 2.，其内部嵌套列表也自然继承层级逻辑。
立即学习“前端免费学习笔记（深入）”；
? 关键注意事项：
- 不要使用已废弃的 <font> 标签（如示例中的 <font size="6" face="arial" color="light blue">），应改用 CSS 控制字体（如 font-family: Arial, sans-serif; font-size: 2em; color: lightblue;）；
- 类选择器（如 .f, .u）仅控制样式，不影响计数逻辑；计数是否连续完全取决于 HTML 结构合法性；
- 若需跨多个父 <li> 共享同一计数序列（如“1. A → 2. B → 3. C”，即使它们属于不同顶级 <li>），则需使用 CSS counter-reset/counter-increment 配合 ::before 伪元素实现，但语义上已不属于标准嵌套列表，需谨慎评估可访问性与 SEO 影响。
? 总结：
让 <ol> 序号连续递增，核心不是调整 CSS，而是修复 HTML 结构——确保每个 <ol> 或 <ul> 都严格嵌套在 <li> 内部。遵循这一原则，配合你已定义的 .f（decimal）、.u（upper-roman）等类，即可生成语义清晰、样式可控、计数准确的多级列表。
