强制恢复ol为1、2、3编号需显式设置list-style-type: decimal，并清除list-style: none、伪元素干扰及框架类覆盖；同时需重置padding-inline-start和margin-block以统一缩进与对齐。
ol 的 list-style-type 被覆盖后怎么强制回退到 1、2、3？
直接设 list-style-type: decimal 就能恢复默认阿拉伯数字，但很多人试了没效果——根本原因是浏览器默认样式被其他 CSS 层叠覆盖，或 ol 上残留了 list-style: none 这类重置规则。
实操建议：
- 检查是否写了
ol { list-style: none; }或ol { list-style-type: lower-alpha; }，删掉或用更具体的选择器覆盖 - 显式写
ol { list-style-type: decimal; }，不要只依赖“没写就是默认”，因为第三方 CSS（如重置库、框架）常主动清空 - 如果用了伪元素自定义编号（比如
li::before），必须先关掉它：ol { list-style: none; }是罪魁祸首，得改成ol { list-style: initial; }或直接重置
type="1" 和 CSS 的 decimal 到底谁说了算？
type 是 HTML 属性，list-style-type 是 CSS 属性，两者冲突时 CSS 优先。也就是说，哪怕你写了 <ol type="a"></ol>，只要 CSS 里有 ol { list-style-type: decimal; }，最终还是显示 1、2、3。
常见误操作：
- 在 HTML 里写
<ol type="1"></ol>，以为能“加固”默认样式——其实多余，type="1"就是默认值，不写也一样 - 动态 JS 修改
ol.type = "1"，但页面已有 CSS 规则，结果毫无变化 - 用框架（如 Tailwind）时，class 里带
list-disc或list-none，会悄悄覆盖list-style-type，得手动加list-decimal
为什么 reset 后编号看起来“错位”或“缩进异常”？
恢复 decimal 样式只是改了编号符号，不解决对齐问题。各浏览器给 ol 设的默认 padding-left 不同（Chrome 是 40px，Firefox 是 2.5em），导致数字和文字距离浮动。
真正要“还原默认观感”，得一并处理缩进：
- 显式重置：
ol { padding-left: 40px; margin: 0; }（兼容老浏览器） - 现代写法更稳：
ol { padding-inline-start: 2em; margin-block: 0; }（用逻辑属性，适配 RTL） - 如果父容器用了
font-size: 0.875rem这类缩放，2em实际像素会变，此时固定像素值（如40px）反而更可控
嵌套 ol 里子列表编号乱了，怎么统一回数字？
嵌套时，子 ol 默认继承父级样式，但很多 CSS 重置规则会写成 ol ol 或 ol li ol 并设为 list-style-type: lower-alpha，导致第二层变成 a、b、c。
精准修复方式：
- 不靠继承，每一层都明确声明：
ol, ol ol, ol ol ol { list-style-type: decimal; } - 用属性选择器排除干扰：
ol:not([type]):not([style*="list-style-type"]) { list-style-type: decimal; }（慎用，可读性差） - 最稳妥的是加 class 控制：
<ol class="list-decimal"></ol>，然后只对这个 class 设样式，避免全局污染
line-height 和 vertical-align 微调，往往比改 list-style-type 更花时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
