ol标签必须直接包裹li元素,否则非li子元素会被浏览器静默丢弃;start属性仅改变视觉编号且IE11不支持;reversed仅对decimal类型生效,且不改变语义顺序。

ol 标签必须包裹 li 元素,否则纯文本或块级元素(如 p、div)会被浏览器忽略,编号不显示,也不报错。
为什么直接写文本会失效
常见错误是把内容直接塞进 ol 里:<ol>第一步</ol>。浏览器只接受 li 作为合法子元素,其余内容被静默丢弃——你看到的可能是无编号的裸文本,或完全空白(取决于渲染引擎)。
- 正确结构必须是:
<ol><li>第一步</li><li>第二步</li></ol> -
li内可嵌套任意内容(p、img、span等),但ol的直接子元素只能是li、script或template - 若用 JS 动态插入内容,也要确保最终 DOM 结构满足该约束,否则屏幕阅读器可能无法识别为列表
start 属性只改视觉编号,不改语义顺序
想让列表从第 5 步开始显示?用 start="5" 即可,但注意它不影响实际 DOM 顺序或可访问性行为。
- 屏幕阅读器仍会播报“列表第 1 项”,而非“第 5 项”
- 值必须为整数;
start="-2"或start="3.5"会被降级为start="1" - IE11 及更早版本完全不支持
start,始终从 1 开始 - 若需语义上跳过前几项(比如展示“步骤 5–7”但隐藏 1–4),应配合
aria-setsize和aria-posinset手动标注
reversed 仅对 decimal 类型生效
reversed 让编号倒序(如 3、2、1),但它不是万能开关。
立即学习“前端免费学习笔记(深入)”;
- 只对默认数字类型(
list-style-type: decimal)起作用;设type="a"或type="i"后,reversed被忽略 - 可与
start共存:<ol reversed start="10">渲染为 10、9、8… - 倒序不影响
li的 DOM 位置或 tab 键焦点顺序,只是视觉编号变化 - Safari 对
reversed的支持较稳定,但某些旧 Android WebView 可能表现异常
真正容易被忽略的是:所有 HTML 属性(type、start、reversed)都只是渲染提示,不改变语义层级或可访问性逻辑。需要精确控制样式或行为时,CSS 的 counter-reset/counter-increment 或 ARIA 属性才是更可靠的选择。



















