ol和ul不能并列组合，只能在li内嵌套——因html规范限定列表直接子元素仅为li，否则破坏语义、可访问性及渲染稳定性。
ol 和 ul 不能直接“组合”成一个新标签，但可以嵌套使用——这是唯一合法且语义正确的组合方式。强行平级混用或省略 li 会导致 HTML 结构错误、可访问性降级，甚至被浏览器自动修正而破坏预期样式。
为什么不能把 ol 和 ul 并列写在同一个父容器里？
HTML 规范要求列表容器（ol 或 ul）的直接子元素只能是 li。如果你写成这样：
<div> <ol><li>第一步</li></ol> <ul><li>子选项A</li></ul> </div>
看起来像“组合”，其实只是两个独立列表并排放置。它们之间没有语义关联，屏幕阅读器会分别读作“有序列表，1项”“无序列表，1项”，无法表达“第一步包含以下子项”这种层级关系。
真正有效的组合：在 li 内部嵌套另一种列表
只有把一种列表作为另一个列表的 li 的内容，才算语义正确、结构清晰的组合。常见场景包括：
- 步骤说明中某一步含多个并列操作（
ol→li→ul） - 导航菜单中某个主菜单项展开为子菜单（
ul→li→ul或ol） - 排行榜条目附带详情说明（
ol→li→dl或ul）
示例（步骤+子项）：
<ol>
<li>准备食材
<ul>
<li>鸡蛋 2 个</li>
<li>牛奶 100ml</li>
</ul>
</li>
<li>混合搅拌</li>
</ol>
注意：ul 必须完整写在 li 开始与结束标签之间，不能跨出；否则解析结果不可控。
嵌套时容易踩的坑
嵌套本身简单，但实际开发中常因忽略以下几点导致样式错乱或语义失效：
-
ul或ol嵌套在li中时，浏览器默认会给内层列表加缩进（padding-left），若未重置，可能和外层对齐错位 - CSS 选择器没写对，比如用
ul ul想匹配所有嵌套ul，但漏掉了ol ul场景 - 过度嵌套（超过三层），既影响可维护性，也降低屏幕阅读器理解效率；W3C 建议嵌套深度 ≤ 2 层
- 忘记给内层列表的
li加内容，空li在部分旧浏览器中会塌陷或渲染异常
要不要用 CSS 替代嵌套来“模拟”组合效果？
不推荐。有人试图用 display: list-item + 伪元素手动拼编号和符号，绕过真实列表结构。这样做虽然视觉上像组合，但彻底丢失了语义：
- 键盘 Tab 焦点顺序混乱
- 屏幕阅读器无法识别列表上下文（如“第2项，共5项”）
- 打印样式、高对比度模式下表现不可控
真正需要组合逻辑的地方，就老实用嵌套——结构清晰、兼容性好、维护成本低。复杂交互再配合 JS，但 HTML 骨架必须扎实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
