html 中 `
- ` 的编号中断（始终显示为 1）通常源于非法嵌套：`
- ` 内，而非并列于 `
- ` 或 `
- ` 外部；否则浏览器会重置计数器。本文详解合法嵌套结构、修复逻辑，并提供可运行示例。
在 HTML 规范中，有序列表 <ol> 和无序列表 <ul> 只能作为 <li> 元素的子元素进行嵌套，而不能直接作为兄弟节点平级置于同一父容器（如 <ul>）下。你原始代码中将多个 <ol class="f">（如 <li>Single-Engine Aircraft</li> 后紧接一个独立 <ol class="f">）直接写在 <ul class="a"> 内部，违反了 HTML 语义结构——这会导致浏览器将其视为「新列表起点」，强制重置序号为 1，因此所有 .f 列表都只显示 1.。
✅ 正确做法是：每个 <ol>（或 <ul>）必须包裹在上一级 <li> 标签内部，形成清晰的父子层级关系。例如：
<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>? 注意：<ol class="f"> 不再是 <ul> 的直接子元素，而是 <li> 的子元素 —— 这样浏览器才能识别其为“同一有序列表的延续”，自动递增编号（1 → 2 → 3…）。
此外，以下几点需特别注意：
- ❌ 禁止使用 <font> 标签：已废弃多年，应改用 CSS 控制字体（如 font-family, color, font-size）；
- ✅ 推荐语义化结构：外层用 <ul> 表示主分类（如 Aircraft Types），每项 <li> 包含标题 + 子列表，子列表统一用 <ol> 表示带序号的层级；
- ⚠️ 类名复用要谨慎：.f（decimal）多次出现时，只要嵌套合法，浏览器会自动维护各自独立的计数器（即每个 <ol class="f"> 是独立序列，但其内部 <li> 会连续编号）；
- ? 提升可访问性：避免纯视觉样式（如颜色/大小）传递结构信息，用 <h2>、<section> 等语义标签辅助屏幕阅读器。
完整修复后的精简示例（含现代写法）：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html> <head> <style> div { background-color: white; width: 300px; border: 2px solid red; padding: 20px; margin: 10px; } ul.a { list-style-type: disc; } ol.f { list-style-type: decimal; } ol.u { list-style-type: upper-roman; } ol.t { list-style-type: upper-latin; } ol.p { list-style-type: lower-latin; } ol.q { list-style-type: lower-roman; } /* 替代 <font> */ .title { font-family: Arial, sans-serif; color: lightblue; font-size: 2em; margin-top: 0; } </style> </head> <body> <div> <h2 class="title">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> <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> </body> </html>✅ 效果：.f 列表将正确显示 1., 2., 3., 4.…… 而非全部 1.；各罗马/拉丁字母列表也按预期嵌套递进。
总结：HTML 列表序号是否连续，本质取决于DOM 结构合法性，而非 CSS 类名或样式声明。牢记「列表只能嵌套在列表项中」这一黄金规则，即可彻底规避编号重置问题。
- ` 必须直接嵌套在 `
