本文讲解如何正确使用 实现多层级编号列表，解决因混用 标签和硬编码数字导致的语义缺失、样式错乱及内容溢出问题，并提供符合标准的嵌套结构示例。
本文讲解如何正确使用 `
- ` 实现多层级编号列表，解决因混用 `
- ；若某条规则下含子规则，则在其
- 内部嵌套另一个
- 。
` 标签和硬编码数字导致的语义缺失、样式错乱及内容溢出问题，并提供符合标准的嵌套结构示例。
在 HTML 中，
- （有序列表）不仅是视觉编号工具，更是具有明确语义的结构化元素。你遇到的问题——
- 不生效、文字“跳出容器”、编号未自动递增——根本原因在于：将本应属于主列表项的内容错误地写为无序的
段落，而仅对子项使用
- ，破坏了文档大纲结构与浏览器默认样式继承逻辑。
正确的做法是：整个规则序列应统一由一个外层 定义，每条规则对应一个
这样既保证语义清晰（屏幕阅读器可准确播报层级关系），也确保 CSS 样式（如 margin、padding、list-style-position）能自然作用于所有列表项，避免内容溢出容器。
以下是修复后的标准 HTML 结构：
<ol start="34">
<li>Only live players playing in a set may be inside the boundaries of their half.</li>
<li>If any part of a live player touches a boundary line they are rendered out.</li>
<li>
If any part of a live player touches a surface, object, or person outside of the boundary line on their team’s half of the court they are rendered out.
<ol type="a">
<li>That player may pass any balls they are carrying to any live player on their team.</li>
<li>That player may not intentionally touch any other balls.</li>
<li>That player may not intentionally obstruct any live players or ball retrievers.</li>
<li>That player may not intentionally obstruct any live balls thrown by the opposing team.</li>
</ol>
</li>
<li>Dead players must line up in the marked player return area in the order that they have been rendered out.</li>
</ol>
✅ 关键要点说明：
- start="34" 确保编号从 34 开始，后续
- 自动递增至 35、36、37、38；
- 所有主干规则均包裹在
- 中，而非
，保留列表语义与默认缩进/对齐；
- 子规则嵌套于第三条
- 内部，使用
- 实现小写字母编号；
- 移除冗余属性（如 tabindex="0"、内联 style 中与布局无关的声明），提升可维护性；
- 若需控制列表项缩进或对齐，推荐通过 CSS 设置 ol, ol li { margin-left: 1.2em; } 或 list-style-position: inside;，而非依赖
的 font-size 模拟。
⚠️ 注意事项：
- 避免在
- 外使用
+ 手动数字（如 "34."），这会使内容无法被辅助技术识别，且响应式布局中易发生换行错位；
- 默认 list-style-position: outside，若子列表文字紧贴左侧边界，可加 ol { list-style-position: inside; } 统一内缩；
- 如需自定义编号样式（如罗马数字、字母大小写），优先使用 type 属性（"I", "i", "A", "a"）或现代 CSS counter-reset/counter-increment，而非 JavaScript 模拟。
遵循语义化列表结构，不仅能解决当前显示异常，更能提升网页可访问性、SEO 友好度与长期可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
