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

本文讲解如何在 `

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

   HTML 规范明确要求：嵌套的列表（如

   或
   ）必须作为某个
   • 元素的内容
   ，而不能直接作为外层
   的子元素。否则会触发解析警告（例如浏览器开发者工具中的“
   not allowed as child of
   ”），且可能导致渲染异常或语义失效。

   正确的做法是将子

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

      <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 功能）。

      下载
      • 子
        必须位于
        1. 开始标签与结束标签之间（即作为
        2. 的内联内容），不可脱离其父
        3. ；
        4. 不需要额外添加空
        5. 或占位符——子列表本身即构成第 3 项的完整内容；
        6. 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; }

      ⚠️ 注意事项：

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！