本文介绍如何使用纯 CSS 实现有序列表（）中仅对前 5 项显示编号，其余项隐藏序号，且不拆分列表结构，无需 JavaScript。
本文介绍如何使用纯 css 实现有序列表（`
- `）中仅对前 5 项显示编号，其余项隐藏序号，且不拆分列表结构，无需 javascript。
在标准 Web 开发实践中，若需对有序列表进行“部分编号”（例如仅前五项显示数字，后续项无编号），最简洁、语义正确且兼容性良好的方案是直接使用原生
- 元素配合 CSS 选择器，而非手动操作 counter-increment 或依赖 jQuery。
✅ 推荐做法：语义化 + 纯 CSS 控制
首先，将
- 替换为语义更准确的
- —— 它天然支持自动计数，并能被屏幕阅读器正确识别，提升可访问性：
- 开始的所有后续
- 元素（即索引 ≥ 6），并统一应用 list-style-type: none，从而彻底隐藏其默认编号。
<ol class="demo1"> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> <li>第五项</li> <li>第六项（无编号）</li> <li>第七项（无编号）</li> <li>第八项（无编号）</li> <li>第九项（无编号）</li> </ol>
然后，通过 CSS 隐藏第 6 项及之后的列表标记：
.demo1 {
/* 可选：重置起始值（如需从1开始，此行可省略） */
counter-reset: none;
}
/* 隐藏第6项及之后的序号 */
.demo1 li:nth-of-type(n + 6) {
list-style-type: none;
}
/* 可选：移除左侧空白，避免因隐藏序号导致布局偏移 */
.demo1 li:nth-of-type(n + 6) {
padding-left: 0;
}
? :nth-of-type(n + 6) 是一个强大的伪类选择器，它精准匹配从第 6 个
⚠️ 注意事项与最佳实践
-
不要用
- + counter() 模拟有序列表
- 表示无序）、影响 SEO 和无障碍访问（如读屏软件无法识别顺序逻辑）。
- 避免内联样式或 JS 操作计数器：如原问题中用 jQuery 动态设置 counter-increment，不仅冗余，还易引发维护问题和样式冲突。
-
兼容性无忧：
- 和 :nth-of-type() 在所有现代浏览器（包括 IE9+）中均被广泛支持。
- 如需自定义编号样式（如 “Step 1.”）：仍可结合 counter()，但仅建议用于高级定制场景；基础部分编号需求，list-style-type: none 已足够简洁可靠。
✅ 总结
只需两步即可优雅实现“部分编号”：
- 使用
- 替代
- ，确保语义正确；
- 用 li:nth-of-type(n + 6) { list-style-type: none; } 隐藏指定范围外的序号。
该方案零 JavaScript、高可维护、强可访问，是符合现代 Web 标准的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
