html 中嵌套列表序号中断（如所有 `
- ` 都显示为“1.”）通常源于非法 dom 结构：`
- ` 和 `
- ` 必须直接作为 `
- ` 的子元素，而不能并列置于父 `
- ` 内部——否则浏览器会自动闭合前一个列表、重置计数器。本文详解合法嵌套规则与样式控制技巧。
- 元素内部
- 后面、平级置于同一父
- 或
- 中。你原始代码的问题正在于此：
- General Aviation (piston-driven engines)
- Single-Engine Aircraft
- Dual-Engine Aircraft
- ...
这种写法违反了 HTML 的内容模型（Content Model）：
- 的直接子元素只能是 ；任何
- 、
- 或块级元素若未包裹在
- 中，均会被浏览器自动修正（如插入隐式
- 都从 1. 开始。
- 的子元素
- General Aviation (piston-driven engines)
- Single-Engine Aircraft
- Tail wheel
- Tricycle
- Dual-Engine Aircraft
- Wing-mounted engines
- Push-pull fuselage-mounted engines
- Single-Engine Aircraft
- 将依次显示为 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）等类，即可生成语义清晰、样式可控、计数准确的多级列表。
✅ 正确做法是：将每个嵌套的
- 或
- 作为其对应
这样，外层
- 中的两个
在 HTML 规范中，有序列表
- 和无序列表
- 只能合法地嵌套在
