多级嵌套列表本质是html原生支持的内嵌结构，嵌套必须为的直接子元素；缩进失效常因css重置margin或display属性干扰；应使用ul > li > ul等层级选择器精准控制样式，并确保语义正确以保障可访问性。
多级嵌套列表的 HTML 结构本质
多级嵌套列表不是靠特殊属性或 JS 渲染出来的，就是 <ul></ul> 里直接放 <li>，然后在某个 <li> 内部再写一个 <ul></ul> —— 浏览器原生支持，无需额外 CSS 或 JS 就能渲染出缩进层级。
关键在于：嵌套的 <ul></ul> 必须是 <li> 的**直接子元素**，不能放在 <li> 外面、也不能塞进 <p></p> 或 <span></span> 里，否则语义断裂，样式和可访问性都会出问题。
-
<li>一级项</li>→ 正确 -
<li>一级项<ul><li>二级</li></ul> </li>→ 正确 -
<li>一级项</li> <ul><li>二级</li></ul>→ 错误（<ul></ul>脱离了父<li>）
为什么嵌套后缩进不明显或错位
浏览器默认会给嵌套的 <ul></ul> 加左外边距（margin-left），但这个值可能被重置、继承或受父容器影响。常见原因包括：
- CSS 中写了
* { margin: 0; padding: 0; }，把默认margin-left干掉了 - 父
<li>设置了display: flex或display: grid，导致内部<ul></ul>不再按块级流式布局 - 用了
list-style-position: inside，让项目符号挤进内容区，视觉上缩进变小甚至反向
修复建议：显式设置嵌套层级的缩进，比如 ul ul { margin-left: 1.5em; }，比依赖浏览器默认更可控。
用 CSS 控制不同层级的样式差异
纯靠 HTML 嵌套只能实现基础缩进，要区分一、二、三级的符号、颜色、间距，得靠 CSS 层级选择器：
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ul li { margin-bottom: 0.25em; }
ul ul li { margin-bottom: 0.15em; font-size: 0.9em; color: #555; }
注意：ul ul 匹配所有二级及更深的 <ul></ul>，如果只想精确控制二级，用 ul > li > ul；想只对三级生效，写 ul > li > ul > li > ul。过度嵌套时，选择器太长反而难维护，建议加 class 如 <ul class="level-2"></ul> 更清晰。
可访问性与语义陷阱
屏幕阅读器会根据嵌套结构播报“列表，2 项，子列表，3 项”，所以结构必须严格合法。容易忽略的点：
- 每个嵌套
<ul></ul>必须有且仅有<li>作为直接子元素，不能直接放文本或<p></p> - 不要为了“看起来像列表”而滥用嵌套，比如菜单导航更适合用
<nav></nav>+<ul></ul>，但纯内容大纲才用多层<ul></ul> - 如果某级需要编号（如“1.1.1”），
<ol></ol>嵌套比<ul></ul>更合适，且需配合type和start属性控制起始值
最常被跳过的一步：没验证 HTML 结构是否被解析为预期的树形。打开浏览器开发者工具，展开 <li> 节点，确认内层 <ul></ul> 确实是它的子节点，而不是被自动闭合或移位了。
