如何用CSS计数器实现单列表仅前5项显示序号？

不需要拆分列表，通过CSS的:nth-child选择器就能精准控制前5个列表项显示计数器，具体修改如下：

核心思路 #

• 仅给前5个<li>元素设置counter-increment，让计数器只在这5项递增
• 控制:before伪元素的内容，仅前5项显示计数器数值，其余项不显示

修改后的完整代码 #

HTML（无需改动）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
<li>  Do not wish a number</li>
</ul>

CSS（关键修改）

.demo1 {
    counter-reset: list;
}

/* 仅前5个列表项触发计数器递增 */
.demo1 li:nth-child(-n+5) {
    counter-increment: list;
}

/* 默认隐藏所有:before内容，仅前5个显示计数器 */
.demo1 li:before {
    content: "";
}
.demo1 li:nth-child(-n+5):before {
    content: counter(list);
    margin-right: 8px; /* 可选：增加计数器与内容的间距 */
}

补充说明 #

• :nth-child(-n+5)是CSS选择器语法，代表选中第1到第5个子元素
• 若想保留原有JS逻辑，可将JS中的选择器改为$(".demo1 li:nth-child(-n+5)")，仅给前5个li设置counter-increment，同时配合上述CSS控制:before显示

内容的提问来源于stack exchange，提问作者London28