应直接删除 <li> 标签,浏览器会自动重排编号;手动改数字会破坏语义、可访问性和维护性,start 属性仅设起始值不解决断号,复杂编号需用 CSS 计数器。

直接删掉 <li> 标签即可,浏览器会自动重排编号,不需要手动改数字。
为什么不能手动修改 ol 中的数字
有序列表的编号是浏览器根据 <li> 元素顺序自动生成的,不是写死在 HTML 里的文本。手动把“3”改成“2”或删掉某行数字,只会让结构错乱、语义丢失,还可能破坏屏幕阅读器识别逻辑。
-
<ol>的语义是「有顺序关系的一组项」,编号只是渲染结果 - 手动写数字(比如
<li>2. 第二步</li>)会让li内容变成纯文本,失去可访问性和 CSS 控制力 - 后续增删项时,维护成本陡增,容易出错
start 属性只适合初始偏移,不解决删除后重排问题
start 是 <ol> 的原生属性,用于指定起始编号(如 <ol start="5">),但它只影响第一个 <li> 的显示值,之后仍按 +1 递增。它不能跳过某个编号,也不能“跳过已删除项”——删除 <li> 后,浏览器照常重排,start 不会动态调整。
- 适用场景:生成「从第 10 步开始」的独立子流程,而非修复删除后的断号
- 错误用法:
<ol start="1"><li>第一步</li><!-- 删了第二项 --><li>第三步</li></ol>→ 浏览器仍显示 1、2,不是 1、3 - 想强制显示特定编号?说明你其实需要的是描述性内容,该用
<dl>或普通段落 + CSS 伪元素
嵌套 ol 或用 CSS 计数器处理复杂编号逻辑
当真实业务要求「删除中间项后编号保持连续但带层级」(例如「2.3.1」「2.3.2」跳到「2.4.1」),原生 <ol> 就不够用了。这时得靠 CSS counter-increment 和 ::before 配合嵌套结构来控制。
立即学习“前端免费学习笔记(深入)”;
- 纯 HTML
<ol>只支持线性递增,不支持分支、跳变、条件重置 - 示例:二级步骤中删掉一个
<li>,父级<ol>下的子<ol>编号不会自动联动更新 - 真正可控的方式是放弃依赖浏览器默认编号,用
counter-reset/counter-increment手动管理计数器
最常被忽略的一点:删除 <li> 后,如果列表视觉上缩进异常,大概率是 CSS 里写了 padding-left 或 margin-left 没同步调整——<ol> 默认样式本身不依赖 li 数量,但自定义样式可能隐式耦合了项数。



















