html5中和嵌套合法但无自动多级编号，需用css counter实现如1.1、1.1.1样式；混用应基于语义，注意可访问性与seo，避免纯css传递关键逻辑。
HTML5中<ol></ol>和<ul></ul>本身不支持“自动多级编号”（比如1.1、1.2或● → ○ → ◆），嵌套只是结构上的层级关系，编号/符号样式由CSS控制，浏览器默认仅对直接子<li>渲染序号或标记，内部嵌套的列表需单独定义样式才能体现层级逻辑。
嵌套结构合法但无自动层级样式
HTML允许<ol></ol>或<ul></ul>作为<li>的子元素，这是完全符合规范的。但浏览器默认行为是：
- 外层
<ol></ol>按1, 2, 3编号 - 内层
<ol></ol>重置为1, 2, 3（不是1.1, 1.2） - 内层
<ul></ul>始终用实心圆●，不会因嵌套变为空心圆○或方块■
实现真正多级编号需CSS counter
要让嵌套有序列表显示“1 → 1.1 → 1.1.1”，必须用CSS counter-reset 和 counter-increment 手动管理计数器：
对应CSS：
.multi-level { counter-reset: section; }
.multi-level li { counter-increment: section; }
.multi-level li::before { content: counters(section, ".") ". "; }
.multi-level ol { counter-reset: section; margin-left: 20px; }
Ul与Ol混用应基于语义而非样式
选择嵌套类型应看内容逻辑：
- 用
<ol><li><ol></ol></li></ol>：当子步骤有明确顺序（如“安装步骤→下载→解压→配置”） - 用
<ul><li><ol></ol></li></ul>：当主项是并列类别，其下是有序操作（如“开发环境→1. 安装Node.js→2. 初始化项目”） - 避免单纯为了缩进或换符号而嵌套——那该用CSS
list-style-type或背景图替代
可访问性与SEO提示
屏幕阅读器能识别嵌套结构并播报“列表，2项，子列表，3项”，但不会读出“1.2”这类合成编号。因此：
- 确保
<li>文本自身包含必要顺序信息（如开头写“第二步：”） - 不要依赖纯CSS生成的关键编号传递核心逻辑
- 避免过深嵌套（一般不超过3层），否则影响可读性和维护性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
