无序列表嵌套必须严格遵循 ul→li→ul→li 的 dom 结构，子 ul 必须作为 li 的直接子元素；list-style-type 不继承，需用 ul ul 显式设置；深层嵌套应确保结构合法并辅以语义类名控制。
无序列表本身不带顺序语义，但通过嵌套 ul 和 li，就能自然表达层级关系——关键不是“怎么加符号”，而是“结构必须合法”。
嵌套必须写在 li 里面，不能直接塞进 ul
浏览器只认 DOM 层级，不是缩进或空格。子 ul 必须作为某个 li 的直接子元素，否则它会被当成同级列表，失去嵌套语义：
- ✅ 正确：
<ul><li>一级<ul><li>二级</li></ul> </li></ul> - ❌ 错误：
<ul><li>一级</li></ul> <ul><li>二级</li></ul>（两个独立列表） - ⚠️ 注意：
li不能省略——哪怕内容为空，也得写<li><ul></ul></li>，否则 HTML 结构非法
ul 嵌套时，list-style-type 不会继承
CSS 的 list-style-type 默认只作用于当前层的 ul，上层设成 square，下层还是圆点，除非显式覆盖：
- 默认行为：
ul { list-style-type: square; }只影响第一层，子ul仍用disc - 要统一风格：给子
ul单独写样式，比如ul ul { list-style-type: circle; } - 想彻底去掉符号：用
ul ul { list-style: none; }，再配合padding-left控制缩进
多层嵌套时，别依赖 type 属性
ul 没有 type 属性（那是 ol 的），所以所有样式控制都得靠 CSS。但要注意：
- 浏览器对深层嵌套的默认缩进不一致，Chrome 和 Safari 可能差 10px 左右
- 用
margin-left或padding-left手动调缩进是常见做法，但别只调视觉——确保li包裹完整子列表，否则屏幕阅读器读不出层级 - 超过三层后，人眼已难分辨，优先考虑是否真需要这么深；如果必须，建议用语义化类名（如
class="nav-submenu"）配合 CSS 精确控制
最易被忽略的是结构合法性：嵌套不是“看着像就行”，ul → li → ul → li 这个链条断一环，层级就塌了——CSS 再漂亮也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
