html 中 `

` 的编号中断（始终显示为 1）通常源于非法嵌套：`
` 必须直接嵌套在 `
1. ` 内，而非并列于 `
   ` 或 `
   ` 外部；否则浏览器会重置计数器。本文详解合法嵌套结构、修复逻辑，并提供可运行示例。

   在 HTML 规范中，有序列表

   和无序列表
   只能作为
   • 元素的子元素进行嵌套
   ，而不能直接作为兄弟节点平级置于同一父容器（如

   ）下。你原始代码中将多个
   （如
   1. Single-Engine Aircraft
   后紧接一个独立
   ）直接写在
   内部，违反了 HTML 语义结构——这会导致浏览器将其视为「新列表起点」，强制重置序号为 1，因此所有 .f 列表都只显示 1.。

   ✅ 正确做法是：每个

   （或
   ）必须包裹在上一级
   • 标签内部
   ，形成清晰的父子层级关系。例如：

   <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>

   ? 注意： 不再是 的直接子元素，而是 的子元素 —— 这样浏览器才能识别其为“同一有序列表的延续”，自动递增编号（1 → 2 → 3…）。

   此外，以下几点需特别注意：

   • ❌ 禁止使用 标签：已废弃多年，应改用 CSS 控制字体（如 font-family, color, font-size）；
   • ✅ 推荐语义化结构：外层用
     表示主分类（如 Aircraft Types），每项
     • 包含标题 + 子列表，子列表统一用
       表示带序号的层级；
     • ⚠️ 类名复用要谨慎：.f（decimal）多次出现时，只要嵌套合法，浏览器会自动维护各自独立的计数器（即每个
       是独立序列，但其内部
       1. 会连续编号）；
       2. ? 提升可访问性：避免纯视觉样式（如颜色/大小）传递结构信息，用

          、

          等语义标签辅助屏幕阅读器。

     完整修复后的精简示例（含现代写法）：

     立即学习“前端免费学习笔记（深入）”；

     

     CSS

     CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

     下载

     <!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 类名或样式声明。牢记「列表只能嵌套在列表项中」这一黄金规则，即可彻底规避编号重置问题。