合法的列表嵌套结构要求子ul或ol必须作为li的直接子元素，否则浏览器会将其修正为同级列表，导致语义丢失、样式错乱及可访问性问题；ul与ol可混用，但需基于内容语义；嵌套层级无硬性限制，但建议不超过三层。
什么是合法的列表嵌套结构
HTML 中只有 ul、ol 和 li 可以参与嵌套，且必须遵循“li 包裹子列表”的规则。直接把 ul 或 ol 放在另一个 ul 或 ol 里是无效的，浏览器会自动修正（比如把子列表提到同级），导致样式错乱或语义丢失。
- 子列表必须作为某个
li 的直接子元素
-
ul 里可以嵌 ol，反之亦然，没有类型限制
- 嵌套层级没有硬性上限，但超过 3 层易影响可访问性和维护性
怎么写一个带二级菜单的 ul 嵌套
常见场景是导航菜单或分类目录。关键不是“能不能嵌”，而是“在哪嵌”——必须嵌在 li 内部，而不是 ul 下直接写 ul。
<ul>
<li>首页</li>
<li>产品
<ul>
<li>Web 服务</li>
<li>API 工具</li>
</ul>
</li>
<li>关于</li>
</ul>
li 的直接子元素ul 里可以嵌 ol，反之亦然，没有类型限制li 内部，而不是 ul 下直接写 ul。
<ul>
<li>首页</li>
<li>产品
<ul>
<li>Web 服务</li>
<li>API 工具</li>
</ul>
</li>
<li>关于</li>
</ul>注意：第二层 ul 是缩进写在 <li>产品 的结束标签前，不是另起一行空着放——虽然 HTML 解析器能容错，但这种写法容易漏掉闭合标签，也影响 CSS 选择器精准定位（比如 li > ul）。
ol 和 ul 混用时的序号继承问题ol 嵌套时，默认序号不会延续父级，而是每个 ol 独立从 1 开始。如果需要 A.1、A.2 这类多级编号，纯 HTML 不支持，得靠 CSS counter-reset 和 counter-increment 控制。
- 浏览器原生只识别单层
ol 的 type 属性（如 type="a"）
-
ol type="1" 和 ol type="a" 在嵌套中互不影响
- 若用
start 属性手动设起始值，需同步计算上层偏移，极易出错，不建议用于动态内容
容易被忽略的 CSS 重置和缩进控制
默认情况下，嵌套列表的左边距由浏览器 UA 样式决定，各浏览器差异大（Chrome 用 padding-inline-start，Firefox 用 margin-left）。如果不统一重置，会出现缩进不齐、文字换行错位等问题。
- 推荐对所有
ul、ol 显式设置 padding-left: 0 或 margin-left: 0
- 用
li 的 padding-left 或伪元素 ::marker 控制缩进，更可控
- 避免依赖
list-style-position: inside，它会让文本换行后对不齐，尤其在多行列表项中
ol 的 type 属性（如 type="a"）ol type="1" 和 ol type="a" 在嵌套中互不影响start 属性手动设起始值，需同步计算上层偏移，极易出错，不建议用于动态内容padding-inline-start，Firefox 用 margin-left）。如果不统一重置，会出现缩进不齐、文字换行错位等问题。
- 推荐对所有
ul、ol显式设置padding-left: 0或margin-left: 0 - 用
li的padding-left或伪元素::marker控制缩进，更可控 - 避免依赖
list-style-position: inside，它会让文本换行后对不齐，尤其在多行列表项中
嵌套本身很简单，难的是让每一层都响应正确、缩进一致、语义清晰——特别是当列表要配合 JS 动态展开/收起时，DOM 结构一旦写错，后续脚本就很难可靠判断层级关系。
