UL与OL嵌套使用技巧分享

HTML中ul与ol的嵌套虽合法，但必须严格遵循“子列表只能作为li的直接子元素”的结构规范，否则将导致DOM残缺、JS选择器失效及可访问性问题；浏览器默认不支持多级序号（如1.1、2.3.1），需借助CSS counter精确控制层级编号，同时合理设置padding避免缩进失控；更重要的是，屏幕阅读器完全忽略CSS生成的序号，所有关键顺序信息必须显式写入文本内容——掌握这些技巧，才能写出语义正确、样式可控、真正无障碍的嵌套列表。

HTML 中 ul 和 ol 嵌套本身完全合法，但浏览器默认不生成“1.1”“2.3.1”这类层级编号——这不属于 bug，而是规范行为；真正要实现多级编号或统一缩进，必须靠 CSS 主动干预。

嵌套必须写在 li 里，否则结构就错了

常见错误是把子列表直接塞进父列表标签之间，比如：

正确结构只有一种：子列表必须作为 li 的子元素出现：

<ol>
  <li>第一步
    <ol>
      <li>下载安装包</li>
      <li>校验 SHA256</li>
    </ol>
  </li>
  <li>第二步</li>
</ol>

• li 标签不能省略，也不能用 div 替代
• 嵌套层级没有语法限制，但超过 3 层后可读性陡降，屏幕阅读器播报也容易混乱
• 如果语义上某一层只是分组（如“前端工具”下罗列多个独立工具），该用 ul；若子项有明确执行顺序（如“配置 ESLint → 添加规则 → 提交配置”），才用 ol

list-style-type 只控制单层样式，不传递层级

给外层 ol 设 list-style-type: upper-alpha，内层 ol 不会自动变成 “A.1”“A.2”——它仍从 1 开始，且样式独立。想让子列表继承父级类型，得手动重设：

ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }

• list-style-type 对 ul 有效值是 disc/circle/square；对 ol 是 decimal/lower-alpha/upper-roman 等
• IE 10 及更早版本不支持 hebrew、armenian 等冷门值，移动端基本无问题
• 别用 type 属性（如
  ）替代 CSS，它已被废弃，且无法作用于嵌套子列表

实现 “1.1”“1.1.1” 编号必须用 CSS counter

浏览器不会自动拼接父级序号，counters() 函数才是唯一可靠方案。关键不是写对语法，而是理解计数器重置时机：

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

• counter-reset: section 必须在每一层 ol 上显式声明，否则子层计数器不会初始化
• counters(section, ".") 中的 "." 是分隔符，可换成 "-" 或空字符串 ""，但不能省略引号
• 如果某层用的是 ul，但又想显示数字编号（比如目录树），同样要加 counter-increment 和 ::before，不能只依赖 list-style-type

缩进异常不是 HTML 问题，是 padding 累加导致的

嵌套越深，列表越往右偏——这不是 bug，是浏览器默认给每个 ul/ol 设了 padding-left: 40px，每嵌套一层就叠加一次。

• 最简解法：ol ol, ul ul { padding-left: 20px; margin-left: 0; }
• 别用 text-indent 修正，它只影响第一行，对换行列表项无效
• 如果用了 normalize.css 或其他 CSS Reset，先检查它是否已修改过 ul/ol 的默认 padding
• 深层嵌套（≥4 层）建议改用
  或 JS 树形控件，语义更清晰，DOM 也更轻量

最容易被忽略的是：屏幕阅读器不会读出 CSS 生成的 “1.1” 编号，它只按 DOM 层级播报“列表，3 项，子列表，2 项”。所以关键顺序信息（比如“第二步：初始化数据库”）必须写在文本里，不能只靠样式呈现。

理论要掌握，实操不能落！以上关于《UL与OL嵌套使用技巧分享》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！