HTML 列表结构的嵌套技巧-html教程-PHP中文网

子列表必须完整嵌套在li内，否则浏览器会解析为并列列表；type属性不继承，多层需显式声明；缩进靠padding-left累加，超三层推荐css counter实现。

html 列表结构的嵌套技巧

子列表必须完整写在 `li` 里，否则结构断裂

浏览器不会把写在 ul 或 ol 标签之间、但没包进 li 的子列表当嵌套——它会自动“修复”成两个并列列表。比如：

<ol type="A">
A. 第一步
<ol type="1"><li>子步骤</li></ol>
</ol>

这段代码实际被解析为：

<ol type="A">A. 第一步</ol><ol type="1"><li>子步骤</li></ol>

结果就是编号重置、语义丢失、屏幕阅读器读作“两个独立列表”。验证是否真嵌套，打开开发者工具，选中内层 ol，往上查 parentElement，必须是某个 li 节点。

`type` 属性只作用于当前层，不继承也不连续

type="A" 只让这一层用大写字母，它的子 ol 不会自动变成 “A.1”“A.2”，而会从 1 开始，除非你显式写 <ol type="1"></ol>。常见误区包括：

以为 <ol type="A"><li>A.<ol><li>1.</li></ol> </li></ol> 会显示 A.1 —— 实际第二层是纯数字 1.，无前缀
省略子层 type，导致第三层 fallback 到默认 "1"，和预期的 "a" 不符
在第四层继续用 type，不同浏览器行为不一致（Chrome 支持 i，Safari 可能回退到 1）

想实现 A. → 1. → a.，三层都得手动声明：<ol type="A"><ol type="1"><ol type="a"></ol></ol></ol>。

缩进异常不是样式 bug，而是 `padding-left` 累加

每嵌一层，浏览器默认给 ul/ol 加约 40px 的 padding-left，两层就 80px，三层超 120px，看着像错位。别用 text-indent 修——它只动第一行，多行 li 会错开。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

推荐做法：

统一重置基础缩进：ul, ol { padding-left: 2rem; }
用子选择器微调嵌套层级：ul ul, ol ul, ul ol { padding-left: 1.5rem; }
如果用了 normalize.css 或其他 reset，先查它是否已覆盖了 ul/ol 的 padding

超过三层嵌套时，`type` 失效，该切 CSS `counter`

HTML 规范未定义第四层 ol 的 type 行为，Chrome、Firefox、Safari 处理方式不一致。比如 <ol type="i"></ol> 在 Safari 可能直接 fallback 成数字。

可靠方案是用 CSS 计数器：

ol.level-a { counter-reset: a; }
ol.level-a > li { counter-increment: a; }
ol.level-a > li::before { content: counters(a, ".") ". "; }

ol.level-1 { counter-reset: b; }
ol.level-1 > li { counter-increment: b; }
ol.level-1 > li::before { content: counters(a, ".") "." counters(b, ".") " "; }

注意：counters() 在 IE11 及更早版本不支持，如需兼容，得降级为固定符号或 JS 补充生成。

真正难的不是怎么写四层，而是判断要不要写四层——多数专业文档停在三级（A. → 1. → a.），再深就该考虑换结构，比如用 <details><summary></summary></details> 或树形控件。