ol的type属性值必须为小写合法值("1""a""a""i""i"),start只接受正整数且指定首项编号,reversed仅倒序不改语义,嵌套ol需显式设type,css比html属性更可靠。

ol 标签的 type 属性值必须小写且合法
浏览器对 type 属性大小写敏感,type="A" 有效,但 type="a" 在部分旧版 Safari 或 IE 中可能回退为默认数字;更稳妥的做法是统一用小写并测试目标环境。合法值只有 "1"、"a"、"A"、"i"、"I",其他如 "alpha" 或 "lower-roman" 是 CSS 属性,不能直接写在 ol 标签里。
- 错误写法:
<ol type="lower-alpha"></ol>→ 渲染为默认数字 - 正确写法:
<ol type="a"></ol>或用 CSS 的list-style-type: lower-alpha - 注意:
type="1"是显式声明数字(非省略),虽和不写等效,但语义更清晰
start 属性只接受整数,且不支持负数或小数
start 控制编号起始值,但它不是“偏移量”,而是实际显示的第一个序号。传入非整数(如 start="2.5" 或 start="-1")会导致浏览器忽略该属性,回落到 1 开始计数。
- 有效:
<ol start="3"><li>第一步</li></ol>→ 显示 “3. 第一步” - 无效:
<ol start="three"></ol>或<ol start="0"></ol>(部分浏览器仍渲染为 1) - 若需跳过前几项再续编,建议用 CSS 的
counter-reset+counter-increment更可靠
嵌套 ol 时,内层编号类型不会自动继承外层
每个 ol 独立解析自己的 type 和 start,不会沿用父级设置。常见误判是以为嵌套后会自动变成字母或罗马数字——其实默认仍是数字,必须显式声明。
- 默认嵌套效果:
<ol> <li>主项</li> <ol><li>子项</li></ol> </ol>→ 子项仍显示 “1.” - 想要子项用字母:
<ol> <li>主项</li> <ol type="a"><li>子项</li></ol> </ol> - 深层嵌套建议用 CSS 控制,避免 HTML 层叠过深影响可维护性
reversed 属性仅改变顺序,不改变 type 和 start 的语义
reversed 让编号倒序(如 5,4,3,2,1),但它不影响 start 的含义:它指定的是“第一个可见项的编号”,而非“最大值”。如果项数少于 start 值,编号会从 start 往下递减,可能出现负数或零。
- 示例:
<ol reversed start="3"> <li>A</li> <li>B</li> </ol>→ 显示 “3. A”、“2. B” - 危险组合:
<ol reversed start="1"><li>X</li></ol>→ 显示 “1. X”,看似正常,但加第 2 项就变成 “1. X”、“0. Y” - 真正需要倒序编号时,优先考虑 JS 动态生成或 CSS counter,避免依赖
reversed的隐式行为
start 边界、reversed 与计数逻辑的耦合,是实际写文档时最容易漏测的三处。别依赖“看起来对”,一定要在目标浏览器中用不同项数实测渲染结果。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











