html有序列表编号异常主因是结构错误：子列表未嵌套在内或误用替代；正确做法是子必须作为父的直接子元素，且type属性仅作用于当前，现代开发推荐css控制样式。
HTML 有序列表（<ol></ol>）不按预期编号，基本不是浏览器 bug，而是结构或属性用错了位置——最常见的是子列表没嵌套在 <li> 里，或者误用 <p></p> 替代 <li>。
子列表必须嵌套在 <li> 内部，不能平级放在 <ol></ol> 下
这是导致编号重置、层级错乱、语义失效的头号原因。浏览器看到并列的 <ol></ol> 和 <ol></ol>，会当作两个独立列表处理，第二级自动从 A 或 1 重新开始。
- 错误写法：
<ol type="A"><li>A. 主项</li></ol> <ol type="1"><li>1. 子项</li></ol>（两个<ol></ol>并列） - 正确写法：
<ol type="A"><li>A. 主项<ol type="1"><li>1. 子项</li></ol> </li></ol>（子<ol></ol>是父<li>的直接子元素） - 若子列表内容前有说明文字（如“规则如下”），也必须包进
<li>，不能单独用<p></p>放在<ol></ol>外部
type 属性只对当前 <ol></ol> 生效，且优先级低于 CSS list-style-type
type 是 HTML 属性，仅作用于单个 <ol></ol> 元素，无法继承或影响子列表；现代开发中更推荐用 CSS 控制样式，因为 type 可选值少（A、a、I、i、1），且部分浏览器对罗马数字支持不稳定。
- 想让第三级用小写字母？直接给对应
<ol></ol>加type="a"，别指望上级设置能穿透 - CSS 中写
ol:nth-child(3) { list-style-type: lower-roman; }更灵活，还能配合counter-reset做复杂编号 -
type不支持自定义前缀（如 “Step 1.”），这种必须用::before+ CSS 计数器
编号右对齐不能只靠 text-align: right
text-align: right 只对列表项内容生效，编号（marker）仍锚定在左侧。强行设 padding-inline-start: 0 还可能裁掉数字，尤其在窄容器里。
- 简单可靠方案：给
<ol></ol>加dir="rtl"，浏览器会把编号渲染到右侧，内容左对齐保持可读性 - 需要精确控制间距或适配多位序号（如 1–9999）？得用 CSS 计数器 +
display: table布局，避免硬编码padding - 慎用
list-style-position: inside：长文本会绕到编号右边，破坏垂直阅读流，移动端尤其明显
编号被截断或换行错位，本质是布局模型冲突
默认 <ol></ol> 的 padding-inline-start 是为编号预留空间，但它是固定值（通常 40px）。一旦序号变长（比如 100.），或容器宽度受限，就容易出问题。
- 直接
padding: 0→ 编号溢出左边界，屏幕阅读器仍能读出数字，但视觉不可见 - 用
list-style-position: inside→ 文本首行缩进消失，第二行可能顶到编号下方，形成“阶梯状”错位 - 真正健壮的解法是剥离编号渲染逻辑：用
counter-increment+::before生成编号，再用display: table-cell让编号列自适应宽度
嵌套层级越深，越要检查每一层 <ol></ol> 是否严格落在上一级 <li> 内部——这不是“最好这么做”，是 HTML 规范强制要求，也是唯一能让编号连续、语义正确、屏幕阅读器准确播报的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
