ol子元素只能是li，其他元素如p或div会导致HTML校验失败、屏幕阅读器误读、DOM结构非法及JS选择器失效；正确做法是所有内容必须包裹在li内，嵌套ol也须置于li中。

ol子元素只能是li，别往里塞p或div

浏览器会自动容错，把

或

包进

里再渲染，但HTML校验直接报错，屏幕阅读器可能跳过或误读内容。DOM结构非法，后续用JS操作querySelectorAll('ol > li')也拿不到你“以为”的项。

常见错误写法：

第一步

第二步

正确做法：所有主干项必须包裹在

里，哪怕内容含段落、标题或图片——这些都可以合法放在

内部。

• 嵌套时，子
  必须放在某个
• 内，不能挂在父
  下
• 若某步需多段说明，用
  包在
• 里，别靠换行硬凑
• 校验工具（如W3C Validator）会明确提示"Element p not allowed as child of element ol"

start和reversed属性要慎用，动态场景优先CSS计数器

start和reversed是原生支持的属性，但只适用于静态内容。一旦用JS插入新

，编号不会自动重算；比如

加了新项，序号就乱了。

CSS counter-reset + counter-increment更可控，且能配合::marker做样式分离：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

ol {
  counter-reset: step;
}
ol li {
  counter-increment: step;
}
ol li::marker {
  content: counters(step, ".") ". ";
}

• start适合纯静态文档（如PDF导出前的HTML稿）
• reversed仅建议搭配start用于明确倒序（如“第5步→第1步”），别指望它响应数据更新
• 需要字母/罗马数字编号？用list-style-type: lower-alpha或upper-roman，比type属性更可靠

清除默认样式时，padding-left和list-style都要处理

只写list-style: none，编号是没了，但左侧空白还在——Chrome默认padding-left: 40px，Firefox是2em，Safari又不一样。结果就是文字悬空、对不齐、缩进诡异。

安全写法是同步重置逻辑起始边距：

ol {
  list-style: none;
  margin-inline-start: 0; /* 推荐，适配LTR/RTL */
  padding-inline-start: 0;
}

• 别用padding-left: 0硬写，方向固定，RTL页面会出问题
• 如果用Flex布局
  ，记得给
• 设display: block，否则默认list-item可能干扰对齐
• 想保留缩进但不要数字？用list-style-position: inside配合text-indent微调，比全清更精细

嵌套ol时，语义必须真实反映层级关系

嵌套不是为了视觉缩进，而是表达“子步骤属于该主步骤”。比如“3. 编译代码”下嵌套的“① 安装依赖”“② 运行构建”，必须写在第3个

内部，而不是另起一个

平级放。

否则大纲结构断裂，屏幕阅读器无法播报“这是第三步里的第一小步”，SEO也抓不到嵌套意图。

• 主列表用
  ，子列表也用
  （非
  ），除非子项确实无顺序依赖
• 避免“伪嵌套”：用CSSmargin-left模拟缩进而不用
  ，语义丢失不可逆
• 嵌套过深（>3层）要考虑是否真有必要——人脑难跟踪，可访问性也变差

真正容易被忽略的是：一旦用

或

替代

，补救成本远高于初始写对。语义不是“锦上添花”，它是DOM层面的契约——后续所有自动化处理（爬虫、读屏、AI摘要）都基于这个契约成立。

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