嵌套无序列表必须作为有序列表中某个的子元素存在，否则浏览器会修正dom导致序号错乱、缩进失效；应通过css控制缩进与符号类型，并确保语义合理、层级清晰。
有序列表里直接放就行，但必须包在- 里
浏览器不接受 <ol></ol> 下面直接写 <ul></ul>，会自动修正 DOM 结构甚至导致样式错乱。正确做法是：嵌套的 <ul></ul> 必须作为某个 <li> 的子内容存在。
常见错误现象：
- 序号突然中断或重复（比如第3项后跳到第1项）
- 嵌套部分没缩进、符号重叠、层级视觉丢失
- 用开发者工具检查发现
<ul></ul>被浏览器“移出”了<ol></ol>
实操建议：
- 把要展开的子项内容整体放进一个
<li>，再在该<li>内部写<ul></ul> - 避免在
<li>开始标签和<ul></ul>之间加换行或空格（尤其用 Prettier 自动格式化时容易引入多余文本节点） - 如果嵌套后缩进不够，优先用 CSS 控制
margin-left或padding-left，别依赖默认缩进
嵌套时要不要重置无序列表的符号类型
默认情况下，<ul></ul> 嵌套在 <ol></ol> 里，符号仍是圆点（disc），但视觉上容易和上级序号混淆，尤其多层嵌套时。
使用场景：
- 二级菜单项用方块（
square）、三级用圆圈（circle）能强化层级感 - 技术文档中，步骤（
<ol></ol>）下的可选项（<ul></ul>）改用短横线（none+ 自定义图标）更清晰
参数差异：
-
list-style-type: square适用于浅层嵌套（1–2 层） - 超过两层建议用 CSS 类名控制，比如
<ul class="sublist-level-2"></ul>，避免全局ul ul选择器污染其他列表 - 不要用
type属性（如<ul type="square"></ul>），它已废弃且兼容性差
嵌套后语义是否还成立
成立，但取决于你怎么组织内容。HTML 规范允许 <ol></ol> 和 <ul></ul> 任意嵌套，前提是结构合理——即嵌套的 <ul></ul> 确实表达“该步骤下的一组并列可选项”，而不是强行塞进去的装饰性内容。
容易踩的坑：
- 把整个导航栏塞进一个
<li>再套<ul></ul>，结果搜索引擎认为这是“某条导航的子集”，而非独立导航模块 - 在教程步骤（
<ol></ol>）里嵌套一个带编号的<ol></ol>，却没声明start属性，导致子步骤从 1 重新开始，破坏逻辑流 - 用
<dl></dl>替代<ul></ul>做嵌套（比如想表达“配置项→取值说明”），虽然合法，但偏离了“步骤+选项”的原始语义
移动端嵌套列表的缩进与点击区域问题
嵌套列表在小屏上常出现两个实际问题：缩进太深导致文字被截断；<li> 点击热区太小，用户误触上级项。
性能 / 兼容性影响：
- CSS
text-indent不推荐用于缩进嵌套列表，它只缩进第一行，对多行项无效；应统一用padding-left - 给嵌套的
<ul></ul>加margin-top: 0.25em可缓解父子项粘连，提升可读性 - 若需点击展开/收起，别用
<details><summary></summary></details>包裹整个<ul></ul>——它会破坏列表语义，屏幕阅读器可能跳过内部<li>
最常被忽略的是：嵌套层级超过三层后，CSS 的 ul ul ul 选择器优先级容易失控，建议用 BEM 类名（如 list--nested-3）替代深度选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
