start 属性在 html5 中已被废弃，应改用 css counter-reset 和 counter-increment 实现列表起始值控制，并通过 data-start 属性和 javascript 动态注入起始值，ie11 及以下则回退至 li 的 value 属性。
start 属性在 HTML5 中已被废弃，别再用它
HTML5 标准里 start 属性已正式废弃（obsolete），虽然多数浏览器仍能渲染，但它是不可靠的——比如 Safari 对 start 的支持不一致，某些版本会忽略或错位；更关键的是，它无法与 CSS 计数器联动，也不支持负数、小数或非十进制起始值。如果你看到代码里还写 <ol start="5"></ol>，那只是“碰巧能跑”，不是正确解法。
用 CSS counter-reset 和 counter-increment 精确控制起始值
现代标准做法是用 CSS 的计数器机制，完全绕过 HTML 属性限制，灵活性和兼容性都更好。核心是两步：重置计数器起点，再让每个 <li> 触发递增。
常见错误是只写 counter-increment 却漏掉 counter-reset，导致从 1 开始；或者把 counter-reset 写在 <li> 上，结果每个 <li> 都重置一次，全变成同一个数字。
-
counter-reset必须设在<ol></ol>上，值是你想要的起始数字减 1（因为counter-increment是“先加再显示”） -
counter-increment设在<li>上，保持默认的list-item值即可 - 用
::marker伪元素替换默认序号，避免影响内容布局
<ol class="custom-start"> <li>第一项</li> <li>第二项</li> </ol>
.custom-start {
counter-reset: list-item 4; /* 起始显示为 5 */
}
.custom-start li::marker {
content: counter(list-item) ". ";
}
需要动态起始值时，用 data-* 属性 + JavaScript 注入
如果起始数字来自后端或用户输入（比如分页列表第二页从第 26 条开始），硬编码 CSS 不现实。这时用 data-start 存值，JS 动态设置 counter-reset 的值。
注意：不要用 JS 直接改 <li> 的文本内容，那会破坏语义和可访问性；也不要 inline style 写死，不利于复用。
- 给
<ol></ol>加data-start="26" - JS 读取该属性，生成对应 CSS rule 或直接设
style.counterReset - 推荐用
document.documentElement.style.setProperty()统一管理变量，便于主题切换
<ol data-start="26"><li>第26条</li></ol>
const ol = document.querySelector('ol[data-start]');
if (ol) {
const start = parseInt(ol.dataset.start, 10) - 1;
ol.style.counterReset = `list-item ${start}`;
}
IE11 及更老浏览器要 fallback 到内联 HTML
CSS ::marker 在 IE11 及以下完全不支持，counter-reset 虽支持但 ::marker 无效。此时只能退回到用 <li value="X"> —— 它是 HTML5 保留的合法属性，且兼容性比 start 好得多。
别混淆：value 是每个 <li> 单独设的，不是整个列表统一设；它只影响当前项的序号，后续项自动按 +1 接续。
- IE11 下，
<li value="5">渲染为 “5.”，下一项自动是 “6.” - 现代浏览器也支持
value，可作为降级方案保底 - 不要同时用
value和 CSS 计数器，行为可能冲突
<ol> <li value="5">起始为 5</li> <li>自动变成 6</li> </ol>
CSS 计数器方案看着多一步，但真正麻烦的是跨浏览器一致性验证——尤其是当列表嵌套、有 CSS 重置、或用了 CSS-in-JS 库时，counter-reset 的作用域容易被意外覆盖。动手前最好先在目标浏览器里 inspect 元素，看 computed style 里的 counter-reset 是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
