HTML 有序列表不止是序号，嵌套技巧才是结构清晰的关键

做技术文档或者产品手册时，常会遇到这种尴尬：主流程分三步，可第三步里又有三个细分动作。如果全平铺成 1、2、3、4，读者根本分不清主次；要是手写“三、（一）”这样的文字标记，后期修改又得全盘调整。这时候，HTML 原生提供的 <ol> 标签嵌套就成了救命稻草。

很多人知道怎么写单级列表，可一到层级深了就容易乱套。其实核心逻辑很简单：在 <li> 标签内部再塞入一个新的 <ol> 块。不需要复杂的 JavaScript，纯结构就能实现自动编号。下面这个标准写法可以直接复用：

<ol>
  <li>第一步：初始化环境</li>
  <li>第二步：配置参数
    <ol>
      <li>设置 IP 地址</li>
      <li>开启防火墙端口</li>
    </ol>
  </li>
  <li>第三步：启动服务</li>
</ol>

代码看起来不复杂，但真正上线后，默认样式往往不尽如人意。浏览器自带的缩进和圆圈可能跟你的设计稿冲突，这时候就得靠 CSS 来微调。重点在于重置外层列表样式，同时保留内层的层级感。比如用罗马数字区分大章节，字母区分小步骤，视觉效果会专业很多：

/* 外层保持阿拉伯数字 */
.main-list {
  list-style-type: decimal;
  padding-left: 20px;
}
/* 内层改为小写字母 */
.main-list ol {
  list-style-type: lower-alpha;
  margin-top: 10px;
}

除了样式美观，语义化才是被忽视的关键价值。屏幕阅读器在朗读网页时，能准确识别出这是“子列表”，帮助视障用户构建逻辑框架。如果只是单纯用 <div> 换行模拟层级，不仅 SEO 权重受影响，辅助工具的兼容性也会大打折扣。记住，<ol> 的存在就是为了告诉机器和人“这里有顺序关系”。

不过，嵌套也不是越深越好。实际项目中，建议控制在三层以内。超过三层后，移动端的小屏幕上内容会变得非常窄，阅读体验直线下降。如果业务场景确实需要展示四级以上的流程，不如考虑折叠面板（Accordion）组件，把深层级隐藏起来，按需展开。这样既保留了数据的完整性，又照顾了用户的注意力带宽。

还有一个容易踩的坑是闭合标签。新手经常忘记在外层 </li> 之前关闭内层 </ol>，导致后续布局错位。检查源码时，利用编辑器的括号匹配功能高亮显示，能节省大量排查时间。毕竟，一个小小的闭合标签缺失，可能导致整个页面样式崩塌。

总结下来，HTML 的 <ol> 嵌套不仅是代码技巧，更是对内容逻辑的梳理。它让无序的信息流有了骨架，让阅读者能一眼看清操作路径。下次再遇到复杂的流程说明，试着放下手动编号的习惯，把结构交给浏览器去计算，你只需要专注内容的准确性就好。