ol标签不支持多级嵌套自动重置编号,需用start="1"显式重置;编号与文字错位时用list-style-position:inside对齐;带父级前缀(如1.1)需css counters实现,但影响无障碍和打印,优先保障语义正确性。

ol 标签本身不支持多级嵌套编号重置?用 start 手动调
HTML 原生 <ol></ol> 不会自动为嵌套列表重置计数,比如二级步骤不会从 1 开始——它默认继承上级的继续编号。想让子步骤独立编号,得显式加 start="1"。
常见错误是只写 <ol><li>...</li></ol> 就以为能自动分层编号,结果出现 “1.1 → 1.2 → 2.1” 这类错乱(实际是纯线性 1,2,3,4…)。
- 一级流程用
<ol></ol>,编号自然从 1 起 - 每个子步骤块单独套一层
<ol start="1"></ol>,别依赖嵌套自动重置 -
start是字符串属性,写start="1"没问题,但不要写成start={1}(JSX 里也得加引号)
怎么让 ol 的编号和内容对齐不换行?用 list-style-position: inside
默认 <ol></ol> 编号在左侧外边距,长文字容易顶到编号上,视觉错位。说明书最怕排版挤在一起看不清步骤。
直接加内联样式或 CSS 类:
<ol style="list-style-position: inside;"> <li>打开设置 → 点击“高级选项”</li> <li>勾选“启用调试模式”,然后重启应用</li> </ol>
-
inside让编号嵌入文本流,避免缩进过大 - 如果用了自定义字体或小字号,注意
line-height别设太小,否则编号和文字上下错位 - 不要用
text-align: justify或强制white-space: nowrap,会破坏步骤可读性
需要「1.1」「2.3」这种带父级前缀的编号?原生 ol 做不到,得用 CSS counters
HTML <ol></ol> 只提供扁平数字,不生成层级前缀。所谓“1.1”本质是 CSS 计数器拼接的结果,不是语义化结构。
真要实现,必须用 CSS counter-reset + counter-increment + ::before 伪元素手动拼接:
ol { counter-reset: section; }
ol li { counter-increment: section; }
ol li::before { content: counters(section, ".") ". "; }
- 这个方案不改变 HTML 结构,但丧失了屏幕阅读器对原生序号的识别能力
- 如果导出 PDF 或打印,部分浏览器不渲染 CSS 伪元素,编号可能消失
- 更稳妥的做法:用纯文本前缀(如
<li> <strong>2.3</strong> 保存配置文件…</li>),放弃自动计数
语义重要还是样式重要?说明书优先用 <ol></ol>,别为了好看换 <div>
<p>有人图省事用一堆 <code><div> + 手动写 “1.” “2.”,结果搜索引擎和读屏软件完全无法识别这是有序步骤。说明书类内容恰恰最需要语义清晰。
<ul>
<li>哪怕编号样式丑一点,先确保用 <code><ol><li></ol> 包住每条操作指令
<ol></ol> 标签<ol></ol>,说明它不合规,该换工具,而不是迁就它层级编号看着简单,但一牵扯导出、适配、无障碍,start 和 counter 的边界很容易模糊。实际写说明书时,多数场景用好 start + list-style-position 就够了,别过早卷进 CSS counters 的嵌套逻辑里。











