正确方式是用<ol>包裹<li>，浏览器自动编号；禁止手动写序号或嵌套<p>/<div>，start、reversed、type属性仅作用于当前<ol>，嵌套时各层独立计数，多级连续编号需CSS counters实现。
如何用 <ol> 和 <li> 正确生成有序列表
HTML 有序列表不是靠手动写“1. 2. 3.”实现的，而是由浏览器自动编号。关键在于用对标签嵌套结构：外层必须是 <ol>，每个条目必须包裹在 <li> 内，且 <li> 必须直接作为 <ol> 的子元素。
常见错误是把 <li> 放在 <p> 或 <div> 里，或漏掉 <ol> 直接堆 <li> —— 这会导致语义丢失、样式失效、屏幕阅读器无法识别序号。
-
<ol><li>第一项</li><li>第二项</li></ol>✅ 正确 -
<ol><p><li>错！</li></p></ol>❌<p>不是<ol>的合法子元素 -
<li>单独写</li>❌ 没有<ol>包裹，浏览器当普通文本渲染
start、reversed 和 type 属性的实际作用范围
这三个属性都只作用于当前 <ol> 元素，不影响嵌套的子 <ol>。它们不是全局设置，也不能通过 CSS 替代。
start 控制起始数字（如 start="3" → 3, 4, 5），reversed 让序号倒排（5, 4, 3），type 指定编号样式（"A"、"a"、"I"、"i"、"1"）。注意：type 值区分大小写，"a" 和 "A" 效果不同；reversed 是布尔属性，写上即生效，无需赋值。
立即学习“前端免费学习笔记（深入）”；
-
<ol start="10" type="A"><li>第十项</li></ol>→ 显示 “J. 第十项” -
<ol reversed><li>最后</li><li>中间</li><li>开头</li></ol>→ 显示 “3. 最后 / 2. 中间 / 1. 开头” - 嵌套时：
<ol><li><ol type="i"><li>子项</li></ol></li></ol>，内层type不受外层影响
嵌套有序列表时为什么序号会“断掉”或重复
嵌套本身不会导致序号中断，但开发者常误以为浏览器会自动“续编”子列表。实际上，每个 <ol> 都是独立计数器。比如外层 <ol start="2"> 下嵌套一个默认 <ol>，子列表仍从 1 开始，不是从 3 接着。
若需视觉连续（如 2.1、2.2），不能依赖原生 <ol>，得用 CSS counters 手动控制，或改用无序列表 + 自定义前缀文本。原生 HTML 不支持多级自动编号联动。
- 原生嵌套：
<ol><li>主项一</li><li>主项二</li><ol><li>子项一</li></ol></li></ol>→ 外层是 1、2，内层是 1（独立） - CSS 方案示例：
ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counters(item, ".") ". "; } - 别指望
start能跨层级传递 —— 它只管自己这层
用 CSS 修改序号样式时最容易忽略的兼容性点
用 list-style-type 改编号类型（如 lower-roman）基本没问题，但若用 ::marker 伪元素自定义内容（比如加图标、改颜色），要注意 Safari 15.4 之前不支持 ::marker，且它不继承父元素的 font-size，必须显式设置。
更隐蔽的问题是：当给 <li> 设置 display: flex 或 display: grid 时，::marker 会消失 —— 因为 marker 是 inline-level 元素，而 flex/grid 容器会把子项变成 flex item，破坏 marker 渲染流。此时只能用 content + ::before 模拟。
-
li::marker { color: #007bff; font-weight: bold; }→ Chrome/Firefox 可用，Safari ≤15.3 无效 -
li { display: flex; } li::marker { ... }→ marker 不显示，必须换li::before { content: "•"; margin-right: 8px; } -
ol { list-style-type: none; } li::before { content: "→ " attr(data-index); }→ 完全可控，但需手动维护data-index
<ol>，优先考虑 CSS counters 或服务端/JS 生成序号文本——语义和样式解耦反而更稳。 
