start属性是<ol>原生支持的起始编号控制方式,值必须为整数(含负数、零),如start="5"显示“5.”“6.”,不支持小数或字符串;它仅影响视觉编号,不影响DOM顺序或可访问性。

用 start 属性设置有序列表起始编号
HTML 默认的 <ol> 从 1 开始编号,但实际中常需从任意数字(比如 5、100 或负数)开始。直接写 <ol start="5"> 就能实现——这是最轻量、语义最清晰的做法。
注意:start 接收整数,支持负值(如 start="-2"),但不支持字符串或小数;浏览器会自动按顺序递增后续项,无需手动干预每个 <li>。
-
start值只影响编号显示,不影响 DOM 结构或 CSS 计数器逻辑 - 若列表嵌套,子
<ol>的start独立生效,不会继承父级 - 在部分旧版 IE 中
start可能被忽略,需确认目标环境兼容性
用 CSS counter-reset 和 counter-increment 精确控制
当需要跳号、非线性编号(如 1, 1.1, 1.2)、或与内容强绑定时,CSS 计数器比 start 更灵活。核心是重置计数器起点,再在每个 <li> 上递增。
例如让列表从 100 开始并加粗编号:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记(深入)”;
ol {
counter-reset: item 99; /* 实际从 100 开始 */
}
ol li::before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
}-
counter-reset的第二个参数是「初始值」,不是「起始编号」;设为99才能让第一个counter(item)显示为100 - 若列表含子项需不同编号格式(如 A, B, C),得单独定义新计数器并重置
- CSS 计数器不改变
<li>的可访问性语义,屏幕阅读器仍按默认序号读取,需额外加aria-setsize/aria-posinset修正
避免用 <li value="X"> 混合编号
value 属性虽能在单个 <li> 上强制指定编号(如 <li value="7">第七项</li>),但它极易导致混乱,应尽量避开。
- 后续
<li>编号会从该value值继续递增,而非重置回 1;容易误判逻辑 - 多个
value并存时,编号可能跳跃、重复甚至倒退,调试困难 - 现代 HTML 规范已将
value标记为“过时但保留向后兼容”,W3C 明确建议优先用start或 CSS
动态生成时注意 DOM 更新与计数器同步
用 JavaScript 动态插入 <li> 时,start 属性不会自动更新后续项编号,CSS 计数器也不会重新计算——必须手动干预。
- 修改
<ol>的start后,需触发重排(如读取offsetHeight)或替换整个列表 DOM 才能生效 - 用 CSS 计数器时,新增
<li>后无需操作,但若删除中间项,编号不会自动收缩,需重置计数器或重绘 - React/Vue 等框架中,依赖 key 和列表渲染机制,
start改变后需确保<ol>节点被完整替换,否则视图可能滞留旧编号
CSS 计数器的初始值偏移和动态场景下的重置时机,是最容易被忽略的两个细节。


















