仅前三项编号需用 ol + li:nth-of-type(n+4){list-style-type:none}，此法精准隐藏后续编号、保持语义与可访问性；start/value 无法隐藏编号且易致错乱；counter 方案冗余且损害可访问性；需重编号则应拆分为多个 ol。
只显示前三项编号，用 li:nth-of-type(n + 4) 隐藏后续项
要让 list-style-type: none 能精准抑制它，且不影响语义和可访问性。
关键 CSS 规则就这一行：
.my-list li:nth-of-type(n + 4) {
list-style-type: none;
}
-
:nth-of-type(n + 4)匹配从第 4 个li开始的所有li元素，不依赖父级其他节点，比:nth-child()更稳定 - 必须用
list-style-type: none只会去掉圆点，起不到“隐藏数字”的效果 - 若需视觉缩进一致，可额外加
margin-left: 1.5em或padding-left: 0，避免因编号消失导致内容左移
start 属性和 value 不解决“隐藏编号”问题
start 和 value 是控制编号“从几开始”或“某项具体值”，它们不会让编号消失。比如 只重设当前项计数起点，后续仍递增并显示。
误用这些属性试图“跳过显示”会导致编号错乱或语义失真，例如：
- 想隐藏第 4 项编号却写
→ 第 4 项变成 “3.”，第 5 项变成 “4.”，反而暴露了编号 - 在
value→ 编号跳跃不可预测，屏幕阅读器播报混乱 -
start在 IE 中完全不生效，而:nth-of-type()在 IE9+ 就已支持，兼容性更实际
别用 CSS counter 模拟，那是过度设计
有人尝试用 counter-reset/counter-increment 配合 :before { content: counter(...) } 手动造编号，再用 :not(:nth-of-type(-n+3)) 控制显示。这不仅冗余，还引入新风险：
- 手动计数易受 DOM 变动影响（如 JS 动态增删
li），编号立刻错位 - 屏幕阅读器无法识别自定义
content中的数字为“有序列表序号”，会读作普通文本，破坏可访问性 - 多层嵌套时 counter 作用域难管理，
counter-reset位置稍错，整段编号崩塌 - 纯
:nth-of-type()方案零 JS、零 counter、零 DOM 操作，维护成本最低
如果前三项之后还要重新编号，就得拆成两个
比如需求是：“步骤 1–3 正常编号，步骤 4–6 显示为 ‘1. 2. 3.’ 重新开始”，那单个 list-style-type: none 只能隐藏，不能重置。
此时正确做法是拆分为两个独立 start 控制第二段起始值：
<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol><ol start="1"> <li>重启后的第一步</li> <li>重启后的第二步</li> </ol>
注意：拆分后仍是语义化有序列表，辅助技术能分别识别两组顺序逻辑；不要用一个 counter-reset 强行模拟，那会让结构和语义脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
