正确嵌套ol必须让子ol作为父li的直接子节点，否则编号重置；DOM结构违法导致浏览器将其视为新列表，而非延续上层编号。

ol子列表脱离父li导致编号重置

浏览器把没包在

里的

当全新列表，所以第二层永远从A开始，而不是接上一层的B。这不是bug，是DOM结构违法的直接结果。

常见错误写法：

1. A. Item

1. 1. Sub

（两个并列

，中间没

包裹）

• 正确嵌套必须是：
  1. A. Item
     1. 1. Sub
• 用开发者工具检查：子
  节点是否为父
• 的**直接子节点**；如果不是，语义已断裂
• 别指望list-style-type能“延续”编号——它只改符号，不改计数逻辑

用了position: fixed让所有ol堆叠显示

如果嵌套

项挤在同一垂直位置，看着像编号错乱，实际是CSS布局失控。根本原因是给

加了position: fixed，让它脱离文档流，所有层级都定位到top: 0; left: 0。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 立刻移除ol { position: fixed; }，改用正常块级流布局
• counter-reset: item不能只写在顶层
  上——每个
  都该有自己独立的counter-reset
• 若需自定义编号（如1.2.1），用counter-increment + ::before，但前提是DOM结构合法

start属性写了却没生效的真因

start属性本身没问题，但常被其他因素掩盖。它只控制编号起始值，不负责渲染可见性。

• 检查是否误加了list-style: none或display: flex——序号还在计算，只是被隐藏了
• start="5"配合type="a"时，显示的是第5个字母（即e.），不是数字5.；别混用类型和数值预期
• 服务端渲染时start=""或start={null}会退化为默认1，务必确保输出的是整数字符串
• 动态JS赋值ol.start = 100有效，但新增
• 会基于当前项数继续递增，不会重置为100、101、102…

超过三层嵌套时编号与可访问性双崩坏

DOM允许无限嵌套，但现实里三层以上就出问题：屏幕阅读器播报混乱、键盘导航跳过中间层、缩进叠加导致文字严重右偏。

• 法律/医疗类强结构文档，建议用CSS counter-reset/counter-increment实现A.1.a样式，但DOM层级严格限制为3层
• 分类树（如“编程 > 前端 > HTML > 列表”）不该用
  嵌套——这是无序关系，该用
  或
  + role="tree"
• 每个
• 必须含非空文本；空
• 会让辅助技术跳过整个分支
• 最易忽略的是：你用
  嵌套，并不等于内容天然有序——调换项序是否改变含义？不是，就该换标签

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！