如何在 HTML 有序列表中仅显示前 N 项编号

本文介绍如何使用纯 CSS 实现有序列表（<ol>）中仅对前 5 项显示编号，其余项隐藏序号，且不拆分列表结构，无需 JavaScript。

本文介绍如何使用纯 css 实现有序列表（`

`）中仅对前 5 项显示编号，其余项隐藏序号，且不拆分列表结构，无需 javascript。

在标准 Web 开发实践中，若需对有序列表进行“部分编号”（例如仅前五项显示数字，后续项无编号），最简洁、语义正确且兼容性良好的方案是直接使用原生 <ol> 元素配合 CSS 选择器，而非手动操作 counter-increment 或依赖 jQuery。

✅ 推荐做法：语义化 + 纯 CSS 控制

首先，将 <ul> 替换为语义更准确的 <ol> —— 它天然支持自动计数，并能被屏幕阅读器正确识别，提升可访问性：

<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 个 <li> 开始的所有后续 <li> 元素（即索引 ≥ 6），并统一应用 list-style-type: none，从而彻底隐藏其默认编号。

立即学习“前端免费学习笔记（深入）”；

⚠️ 注意事项与最佳实践

• 不要用 <ul> + counter() 模拟有序列表：虽然可行，但会丧失语义（<ul> 表示无序）、影响 SEO 和无障碍访问（如读屏软件无法识别顺序逻辑）。
• 避免内联样式或 JS 操作计数器：如原问题中用 jQuery 动态设置 counter-increment，不仅冗余，还易引发维护问题和样式冲突。
• 兼容性无忧：<ol> 和 :nth-of-type() 在所有现代浏览器（包括 IE9+）中均被广泛支持。
• 如需自定义编号样式（如 “Step 1.”）：仍可结合 counter()，但仅建议用于高级定制场景；基础部分编号需求，list-style-type: none 已足够简洁可靠。

✅ 总结

只需两步即可优雅实现“部分编号”：

1. 使用 <ol> 替代 <ul>，确保语义正确；
2. 用 li:nth-of-type(n + 6) { list-style-type: none; } 隐藏指定范围外的序号。

该方案零 JavaScript、高可维护、强可访问，是符合现代 Web 标准的最佳实践。