本文详解如何在 HTML 中精确控制嵌套有序列表的编号类型（如 A.、1.、a.），解决默认重置计数导致的逻辑中断问题，通过 type 属性与语义化嵌套结构实现专业级医学编码文档所需的连续、分层编号效果。

本文详解如何在 html 中精确控制嵌套有序列表的编号类型（如 a.、1.、a.），解决默认重置计数导致的逻辑中断问题，通过 `type` 属性与语义化嵌套结构实现专业级医学编码文档所需的连续、分层编号效果。

在构建结构化文档（如医疗编码指南）时，清晰、可预测的层级编号至关重要。你遇到的问题——外层列表从 A. 开始后，下一级

却“重置”为 A. 而非预期的 B.——根源在于 HTML 规范要求子列表必须严格嵌套在父
1. 元素内部
，而非脱离其上下文独立存在。你原始代码中将
直接置于第一个
1. 闭合标签之后，破坏了 DOM 层级关系，导致浏览器无法正确继承和延续计数逻辑。

   ✅ 正确嵌套结构：语义即逻辑

   所有子列表（

   或
   ）必须作为父
   • 的直接子内容，而非兄弟节点。这是实现连续编号的先决条件：

     <ol type="A"> <!-- 外层：大写字母 A., B., C. -->
       <li><strong>Human immunodeficiency virus (HIV) infections</strong>
         <ol type="1"> <!-- 第二层：阿拉伯数字 1., 2., 3. -->
           <li><strong>Code only confirmed cases</strong>
             <p>Code only confirmed cases of HIV infection/illness...</p>
             <div style="background-color: mediumpurple; padding: 8px 14px">
               Patient being seen for hypothyroidism with possible HIV infection<br>
               <b>E03.9</b>         Hypothyroidism, unspecified<br>
               <i>Explanation:</i> Only the hypothyroidism is coded...
             </div>
           </li>
           <li><strong>Selection and sequencing of HIV codes</strong>
             <ol type="a"> <!-- 第三层：小写字母 a., b., c. -->
               <li><strong>Patient admitted for HIV-related condition</strong>
                 <p>If a patient is admitted for an HIV-related condition...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
                                                             <div class="artcardd flexRow">
                                                                     <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
                                                                                     src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
                                                                     <div class="aritcle_card_info flexColumn">
                                                                             <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
                                                                             <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
                                                                     </div>
                                                                     <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                             </div>
                                                     </div>
                 <div style="background-color: mediumpurple; padding: 8px 14px">
                   HIV with CMV<br>
                   <b>B20</b>         Human immunodeficiency virus [HIV] disease<br>
                   <b>B25.9</b> Cytomegaloviral disease, unspecified<br>
                   <i>Explanation:</i> Cytomegaloviral infection is an HIV related condition...
                 </div>
               </li>
               <li><strong>Patient with HIV disease admitted for unrelated condition</strong>
                 <p>If a patient with HIV disease is admitted for an unrelated condition...</p>
                 <!-- 其他 li 项依此类推 -->
               </li>
             </ol>
           </li>
         </ol>
       </li>
       <!-- 下一项自动为 B. -->
       <li><strong>Next chapter topic</strong>
         <ol type="1">
           <li>First subpoint under B.</li>
           <li>Second subpoint under B.
             <ol type="a">
               <li>a. under B.2</li>
               <li>b. under B.2</li>
             </ol>
           </li>
         </ol>
       </li>
     </ol>

     ? 控制编号类型的两种方式

     方法	语法	适用场景	优势
     HTML type 属性	, ,	快速、语义明确、无需额外 CSS	原生支持，兼容性极佳（所有现代浏览器及 IE9+）
     CSS list-style-type	ol { list-style-type: upper-alpha; }	需统一全局样式或动态切换	更灵活，可结合伪类（如 :first-child）精细化控制

     常用值对照：

     • upper-alpha / "A" → A., B., C.
     • decimal / "1" → 1., 2., 3.
     • lower-alpha / "a" → a., b., c.
     • upper-roman / "I" → I., II., III.
     • lower-roman / "i" → i., ii., iii.

     ⚠️ 关键注意事项

     • ❌ 禁止 将子
       放在父
       1. 外部（如你原代码中的
       2. ...
       ...
       ）。这会导致 HTML 结构无效，浏览器会尝试“修复”而破坏编号连续性。
     • ✅ 必须 让子列表成为
     • 的子元素：
     • 内容
       ...
     。

   • ? type 属性在 HTML5 中仍被完全支持，不是过时用法；它比 CSS 更直观地表达文档意图。
   • ? 若需自定义起始编号（如从 C. 开始），使用 start 属性：
     （对应 ASCII 序列：A=1, B=2, C=3）。

   ? 为你的医疗编码文档优化建议

   鉴于你正在构建 22 章、1200+ 页的专业参考系统，推荐以下实践：

   • 结构先行：用
     包裹每章，

     作章节标题，

     作主条目，确保语义化与可访问性。

   • CSS 辅助增强：添加简洁样式提升可读性，例如：

     ol[type="A"] { margin-left: 0; }
     ol[type="1"] { margin-left: 1.5em; }
     ol[type="a"] { margin-left: 2em; }
     li { margin-bottom: 0.8em; }

   • 搜索友好：配合
     /

     实现可折叠子项，或引入轻量 JS 实现条件过滤（如按关键词高亮匹配条目）。

   通过严格遵循嵌套规则并合理运用 type 属性，你完全可以复现 Word 中的精准编号体验——且更具备 Web 原生的可维护性、响应式能力和长期可扩展性。你母亲的在线编码手册，正因这份结构严谨性而真正专业。