ol嵌套不自动生成1.1、1.2等多级序号，因浏览器对每个ol独立计数；需用CSS counters()配合counter-reset/increment实现，并禁用list-style以避免重叠。
ol 嵌套本身不会自动生成 1.1、2.3.1 这类多级序号——浏览器只对每个 ol 独立计数，内层默认从 1 重新开始，且不继承外层编号逻辑。
为什么直接嵌套 ol 不显示 1.1、1.2 样式
浏览器把每个 ol 当作独立计数器：外层 ol 用 counter-reset: section，但内层 ol 若没显式重置并关联父级，就只会初始化自己的计数器。CSS 默认不合成层级，list-style-type 也不支持点分格式。
-
ol > ol中的子ol默认渲染为1.、2.，不是1.1.、1.2. -
type="a"或list-style-type: lower-alpha不会跨层生效，内层仍需单独声明 - 屏幕阅读器识别的是嵌套结构（“列表，2项；子列表，3项”），而非合成编号，所以语义上不能依赖视觉样式传递层级关系
用 CSS counters 实现真正的 1.1、1.2.1 多级编号
必须放弃依赖 ol 的原生序号，改用 counter-reset + counter-increment + counters() 伪元素组合。
- 外层
ol设置counter-reset: level1，子项用counter-increment: level1并在::before中输出counter(level1) - 内层
ol需同时设counter-reset: level2和counter-increment: level1（保持父级计数连续） - 关键在
counters()函数：它能自动拼接各级，例如content: counters(level1, ".") " ";输出1.1、1.2.1 - 若某级需不同样式（如章用大写罗马，节用阿拉伯），得定义多个独立计数器，再用
counters(level1, ".") "." counter(level2, decimal)拼接
混用 ol 语义与 CSS counter 的实操要点
保留 ol 是为了语义和可访问性，但视觉序号全由 CSS 控制，此时必须禁用原生渲染。
立即学习“前端免费学习笔记（深入）”；
- 给所有参与多级编号的
ol加list-style: none，否则原生数字和 CSS 生成的会重叠 -
li必须设counter-increment，哪怕只是递增父级计数器；不设就不会触发counters()更新 - 嵌套过深（>3 层）时，
counters()的分隔符易混淆，建议用margin-left缩进配合字体加粗区分层级，别只靠数字前缀 - 动态插入新
li时，CSS counter 自动生效，无需 JS 重算——这是比手动写value属性最大的优势
容易被忽略的兼容性与可访问性细节
看似只是样式问题，但影响实际交付质量的关键点藏在边缘场景里。
- 旧版 Safari 对
counters(level, ".")中非"."分隔符（如"–"或空格）支持不稳定，建议始终用英文点号 -
reversed和start属性仍有效，但仅作用于底层计数逻辑；若用了 CSS counter，它们不会自动映射到counters()输出中，需手动处理起始值 - 如果内容本身不含顺序提示（如“第一步”“接下来”），光靠
1.2.1编号不足以支撑弱视或语音浏览用户理解流程，应在文本中嵌入轻量语义词 - 不要用多层
ol嵌套替代大纲结构——h2→h3→h4才是语义正确的层级，ol只适用于真正有执行顺序的步骤或编号条目
