ul 和 li 必须严格嵌套，ul 是唯一合法父容器，li 必须是其直接子元素；嵌套子列表时 ul 只能出现在 li 内部，否则 dom 错乱、css 失效、屏幕阅读器误读。
ul 和 li 必须严格嵌套，缺一不可；单独写 li 或把 ul 放在 li 外面，结构就断了——不是“看起来差不多”，而是 DOM 错乱、CSS 选不到、屏幕阅读器读错。
ul 和 li 的合法嵌套结构长什么样
浏览器只认一种结构：ul 是唯一合法父容器，所有 li 必须是它的直接子元素。嵌套子列表时，ul 只能出现在某个 li 内部，不能悬空或错层。
- ✅ 正确：
<ul><li>水果<ul><li>苹果</li></ul> </li></ul> - ❌ 错误：
<ul><li>苹果</li></ul> <ul><li>香蕉</li></ul>（两个孤立ul，语义断裂） - ❌ 错误：
<ul><div><li>苹果</li></div></ul>（div插在中间，破坏层级） - ⚠️ 空
ul合法但无渲染：<ul></ul>不报错，也不显示任何东西，别指望它占位
list-style-type 不生效？先看 li 的 display
list-style-type 只对 display: list-item 生效，而 li 默认就是这个值。一旦你给 li 设了 display: flex、display: inline-block 或 display: grid，项目符号立刻消失——不是 CSS 写错了，是元素类型变了。
- 横向排列优先用：
ul { display: flex; }+li { margin-right: 1em; }，保留li的默认display - 若必须改
li的display，得手动补：list-style-position: inside和vertical-align: top，否则符号位置飘忽 - 清符号用
list-style: none，比只写list-style-type: none更彻底（它同时清除符号、图片和位置）
用图片替换项目符号，padding-left 必须重置
用 background-image 换图标很常见，但默认 ul 有 padding-left: 40px，不调就会导致图标和文字重叠，或缩进过深。
- 第一步必须做：
ul { list-style: none; padding-left: 0; } - 第二步再给
li加：background: url('icon.png') no-repeat left center;+padding-left: 24px;（留出图标空间） -
background-position: left center依赖line-height，如果行高太小，图标会上下偏移
嵌套列表最容易被忽略的语义完整性
每个子 ul 必须严格位于父级 li 内部，否则键盘导航顺序错乱，屏幕阅读器无法识别“子列表”关系。写完务必用开发者工具检查 DOM 树：看子 ul 是否真的在父 li 节点下闭合，而不是被浏览器自动纠错塞到别处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
