如何重置嵌套列表CSS计数器，实现自定义起始编号与正确嵌套格式

你的问题核心在于所有层级的列表共用了同一个计数器，导致子列表的计数会延续父列表的数值，而不是从1重新开始。我们只需要调整计数器的重置规则，让每个嵌套的子列表都重新初始化自己的计数器即可。

修正后的CSS代码 #

ol.content {
  counter-reset: item 1; /* 这里设置父列表的起始偏移值，比如设为1，第一个li会显示2；若要从5开始，改成4即可 */
  list-style: none;
}

li.content:before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}

/* 关键：每个嵌套的子列表重置计数器为0，让子列表计数从1开始 */
ol.content ol.content {
  counter-reset: item 0;
}

代码解释 #

1. 父列表起始设置：counter-reset: item 1 把计数器item初始化为1，当第一个<li>执行counter-increment: item后，计数器值变为2，刚好实现父列表从2开始的需求。如果需要其他起始数字，比如从3开始，只需要把1改成2就行（因为计数是先递增再显示）。
2. 嵌套编号自动拼接：counters(item, ".") 会自动把所有层级的同名计数器用.连接，轻松实现嵌套编号的效果，不用手动拼接每一层的数值。
3. 子列表重置规则：ol.content ol.content { counter-reset: item 0; } 让每一层嵌套的子列表都将计数器重置为0，这样子列表的第一个<li>执行递增后就会从1开始，彻底解决子列表编号错误的问题。

效果验证 #

• 父列表第一个项显示：2. section TWO
• 子列表第一个项显示：2.1. TWO point ONE (not 2.2!)
• 深层嵌套的第一个项显示：2.4.1. TWO point FOUR point ONE (not 2.5.2!)

这个写法支持任意层级的嵌套，不需要为每一层单独编写规则，完全符合你的需求。

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