如何在CSS中正确重置嵌套于无序列表内的有序列表计数器？

你遇到的问题根源是默认的list-item计数器是全局生效的——无序列表（ul）里的<li>也会触发这个计数器递增，导致嵌套在ul里的有序列表（ol）编号直接从中间开始，层级也乱套了。要解决这个问题，咱们不用默认的list-item，自己定义一个专属计数器就行：

修正后的CSS代码 #

/* 重置列表默认样式，初始化自定义计数器 */
ul, ol {
  list-style: none;
  counter-reset: ol-counter;
}

/* 有序列表的每个li递增自定义计数器 */
ol li {
  counter-increment: ol-counter;
  padding-left: 0.5em;
}

/* 用自定义计数器生成带层级的编号 */
ol li::marker {
  content: counters(ol-counter, ".") " ";
}

/* 手动设置无序列表的项目符号，保持默认样式 */
ul li::marker {
  content: "• ";
}

关键逻辑说明 #

• 自定义的ol-counter只在ol的<li>里递增，ul的<li>不会触发这个计数器，所以嵌套在ul里的ol能从1开始重新计数
• counters(ol-counter, ".")会自动根据嵌套层级生成带点的编号（比如1.1、1.2）
• 手动设置ul的项目符号是因为咱们重置了list-style，得把默认的圆点样式补回来

直接用你提供的HTML测试就能看到效果：单独的ol嵌套保持正常层级编号，ul里的ol也能正确从1开始计数，层级逻辑完全不受ul干扰。

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