HTML中列表标签Ul与Ol的嵌套逻辑及样式美化建议-html教程-PHP中文网

html中ul和ol嵌套合法但需严格遵循结构：子列表必须作为li的子元素，css控制编号与缩进，counter实现多级序号，屏幕阅读器不读css生成编号。

html中列表标签ul与ol的嵌套逻辑及样式美化建议

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

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

常见错误是把子列表直接塞进父列表标签之间，比如：<ul></ul> <ol></ol>。这种写法浏览器会自动容错闭合，但 DOM 结构已残缺，JS 查询 document.querySelectorAll('ul > 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 开始，且样式独立。想让子列表继承父级类型，得手动重设：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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 属性（如 <ol type="A"></ol>）替代 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