本文讲解如何在 <ol> 中合法嵌套另一个 <ol>，避免“<ol> 不能直接位于 <li> 外”的 HTML 结构错误，同时实现如“3. some data: i. another data”这样的层级编号效果。

本文讲解如何在 `

` 中合法嵌套另一个 `
`，避免“`
` 不能直接位于 `
1. ` 外”的 html 结构错误，同时实现如“3. some data: i. another data”这样的层级编号效果。

   HTML 规范明确要求：嵌套的列表（如 <ol> 或 <ul>）必须作为某个 <li> 元素的内容，而不能直接作为外层 <ol> 的子元素。否则会触发解析警告（例如浏览器开发者工具中的“<ol> not allowed as child of <ol>”），且可能导致渲染异常或语义失效。

   正确的做法是将子 <ol> 完全包裹在父级 <li> 标签内部——即子列表属于该列表项的一部分，而非独立列表项。以下是符合标准、语义清晰且渲染正确的写法：

   <ol type="a">
     <li>some data</li>
     <li>some data</li>
     <li>some data:
       <ol type="i">
         <li>another data</li>
         <li>other data,</li>
       </ol>
     </li>
   </ol>

   ✅ 关键要点说明：

   

   html-ppt-to-pdf

   将使用 `

   ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

   下载
   • 子 <ol type="i"> 必须位于 <li> 开始标签与结束标签之间（即作为 <li> 的内联内容），不可脱离其父 <li>；
   • 不需要额外添加空 <li> 或占位符——子列表本身即构成第 3 项的完整内容；
   • type="a" 和 type="i" 属于过时属性（HTML5 中已不推荐），建议改用 CSS list-style-type 实现更灵活、可维护的样式控制：

   <ol class="alpha-list">
     <li>some data</li>
     <li>some data</li>
     <li>some data:
       <ol class="lower-roman-list">
         <li>another data</li>
         <li>other data,</li>
       </ol>
     </li>
   </ol>

   .alpha-list { list-style-type: lower-alpha; }
   .lower-roman-list { list-style-type: lower-roman; }

   ⚠️ 注意事项：

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

   • 错误写法（<ol> 直接置于 <ol> 下）违反 HTML 嵌套规则，会导致文档结构无效，影响无障碍访问（如屏幕阅读器无法正确识别层级关系）；
   • 所有列表项必须显式使用 <li> 包裹，即使仅含文本或嵌套列表；
   • 若需在子列表前添加冒号、换行等视觉分隔，应通过 CSS（如 ::after 伪元素或 margin）实现，而非依赖 HTML 结构hack。

   遵循此结构，即可获得语义正确、验证通过、样式可控的多级有序列表，完美呈现 1., 2., 3. ... i., ii. 的预期效果。