必须完整嵌套在内，否则DOM结构断裂；正确路径为→→；语义上表顺序步骤，表并列子项；样式需CSS显式设置；嵌套超两层损害可访问性。
必须把 <ul></ul> 完整写在某个 <li> 标签内部，否则浏览器会直接破坏 DOM 结构——不是“显示错”，而是根本没嵌套成功。
嵌套位置错了，DOM 就已经断裂
浏览器只认一种合法嵌套路径：<ol></ol> → 直接子元素只能是 <li> → 子 <ul></ul> 必须完整落在某个 <li> 的起始与结束标签之间。
- ✅ 正确：
<ol><li>第一步<ul><li>子操作A</li></ul> </li></ol> - ❌ 错误：
<ol><li>第一步</li></ol> <ul><li>子操作A</li></ul>（<ul></ul>并列在<ol></ol>内，但不在<li>里） - ❌ 错误：
<ol>第一步</ol> <ul><li>子操作A</li></ul>（文本“第一步”没包在<li>里，内层<ul></ul>会被浏览器自动移到<ol></ol>外）
为什么用 ol + ul 组合？语义不能混
<ol></ol> 表示步骤、条款、流程顺序；<ul></ul> 表示并列选项、补充说明、无序子集。两者混合是常见且合理的语义组合，比如安装步骤里的可选组件列表。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 别用
<ol type="A"></ol>或<ul type="circle"></ul>：这些属性已废弃，对嵌套子列表完全无效 - 想让子
<ul></ul>显示空心圆？必须显式写：ul { list-style-type: circle; }，它不会继承父级<ol></ol>的任何样式 - 如果 JS 动态插入子
<ul></ul>，务必调用liElement.appendChild(ulEl)，而不是往olElement上 append
缩进异常？八成是 padding-left 累加导致的
浏览器默认给每个 <ul></ul> 和 <ol></ol> 加约 40px 的 padding-left。嵌套一层就变成 80px，文字严重右偏——这不是 HTML 写错了，是盒模型叠加的结果。
立即学习“前端免费学习笔记（深入）”；
- 别用
text-indent试图修正：它只影响第一行，多行<li>会错位 - 推荐统一重置：
ul, ol { padding-left: 1.5rem; }，再微调嵌套层：ol ul, ul ul { padding-left: 1.25rem; } - 若需彻底清除默认符号和缩进：
ul, ol { list-style: none; padding-left: 0; }（注意是list-style，不是list-style-type）
超过两层嵌套，可访问性就亮红灯
键盘 Tab 焦点、屏幕阅读器播报、移动端双指滑动读屏，都依赖清晰的父子关系。三层以上嵌套（如 <ol><li><ul><li><ol></ol></li></ul></li></ol>）会让焦点顺序混乱，读屏器可能跳过中间层级。
- 真实项目中，两层足够：主步骤（
<ol></ol>）→ 子选项（<ul></ul>） - 真有三级需求？优先考虑用折叠交互（JS 控制
display或aria-expanded），而非纯 HTML 嵌套 - 验证是否嵌套成功：打开开发者工具，选中内层
<ul></ul>，往上查父节点，必须能一路回溯到某个<li>，再回到外层<ol></ol>
