本文介绍如何使用纯 CSS（无需 JavaScript）实现对单个 <ol> 列表的前若干项显示序号、后续项隐藏编号，保持语义完整性与 DOM 结构统一。
本文介绍如何使用纯 css（无需 javascript）实现对单个 `
- ` 列表的前若干项显示序号、后续项隐藏编号，保持语义完整性与 dom 结构统一。
在构建结构化内容时，我们常需兼顾语义正确性与视觉表现。HTML 的 <ol> 元素天然支持自动编号和语义化顺序表达，但有时设计需求要求“仅前 5 项显示数字，其余项无编号”——且不能拆分列表为多个 <ol>（否则破坏语义连续性与辅助技术可访问性）。
幸运的是，CSS 提供了简洁高效的解决方案：无需 JavaScript 操控 counter，也无需动态修改样式，仅通过伪类选择器与 list-style-type 即可精准控制。
✅ 推荐方案：使用 :nth-of-type() 配合 list-style-type: none
核心思路是：利用 li:nth-of-type(n + 6) 选择从第 6 项开始的所有 <li>，并将其列表标记设为无：
.demo1 li:nth-of-type(n + 6) {
list-style-type: none;
}配合标准有序列表结构：
立即学习“前端免费学习笔记（深入）”；
<ol class="demo1"> <li>第一项（显示 “1.”）</li> <li>第二项（显示 “2.”）</li> <li>第三项（显示 “3.”）</li> <li>第四项（显示 “4.”）</li> <li>第五项（显示 “5.”）</li> <li>第六项（无编号，仅内容）</li> <li>第七项（无编号）</li> <li>第八项（无编号）</li> </ol>
✅ 优势显著：
- 完全语义化：仍为单一 <ol>，屏幕阅读器正确播报序号（前 5 项有编号，后几项自然无编号）；
- 无 JS 依赖：性能更优、兼容性更好（支持所有现代浏览器及 IE9+）；
- 易于维护：修改起始项数只需调整 n + X 中的 X（如前 3 项编号 → 改为 n + 4）；
- 不影响布局：list-style-type: none 仅隐藏编号，不改变 <li> 的盒模型或缩进。
⚠️ 注意事项
- 避免误用 :nth-child()：若 <li> 前存在其他元素（如注释、文本节点），:nth-child() 可能失效；而 :nth-of-type() 仅匹配 <li> 元素自身，更健壮。
- 不可与自定义 counter 混用：若已用 counter-reset/increment 实现复杂编号逻辑（如跳号、多级嵌套），则需改用 counter() 配合 :not() 或 :nth-of-type(-n+5) 控制 content，但本例推荐优先使用原生 <ol> + list-style-type，更简洁可靠。
- 重置编号起点？ 若需后段重新编号（如“第六项→1.”），应拆分为多个 <ol> 并用 start 属性（如 <ol start="1">），但此时已违背“单列表”前提，需权衡语义与设计目标。
✅ 总结
要实现单个有序列表中“前 N 项编号、后 N+1 起无编号”，最佳实践是：
? 使用 <ol> 替代 <ul> 保证语义正确；
? 用 li:nth-of-type(n + X) 精准定位起始隐藏位置；
? 设置 list-style-type: none 移除编号，而非干扰计数器逻辑。
这样既符合 Web 标准，又兼顾可访问性、性能与可维护性——真正的“一行 CSS 解决问题”。
