HTML表格中CSS counter-reset属性无法正常重置的问题求助

问题原因 #

你遇到的问题是CSS计数器默认带有全局上下文，即便在每个<ol>上设置了counter-reset: item，若之前的列表已使用过同名计数器，浏览器会默认延续计数。另外，表格单元格的渲染上下文可能导致计数器重置规则的优先级被覆盖，使得重置未生效。

解决方案 #

通过以下调整确保每个列表的计数器独立重置：

1. 明确为每个顶级<ol>重置计数器，并确保选择器优先级足够高
2. 区分顶级列表和嵌套列表的计数器生成逻辑，避免全局累加

修改后的完整CSS代码：

/* 顶级列表容器 */
ol.list-style-1 {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  margin: 10px 0;
  padding-left: 40px;
  counter-reset: item; /* 重置计数器为初始值0 */
  list-style: none; /* 隐藏默认编号 */
}

ol.list-style-1 > li {
  margin-bottom: 15px;
  position: relative;
}

ol.list-style-1 li:last-child {
  margin-bottom: 0;
}

/* 顶级列表项编号：使用单个计数器 */
ol.list-style-1 > li:before {
  content: counter(item) ".";
  counter-increment: item; /* 递增当前列表的局部计数器 */
  color: #000;
  position: absolute;
  top: 0;
  left: -30px;
}

/* 嵌套列表容器：重置嵌套计数器 */
ol.list-style-1 > li ol {
  margin-top: 10px;
  padding-left: 30px;
  counter-reset: item;
}

/* 嵌套列表项编号：使用多级计数器 */
ol.list-style-1 > li ol li:before {
  content: counters(item, ".") ".";
  counter-increment: item;
  color: #000;
  position: absolute;
  top: 0;
  left: -30px;
}

ol.list-style-1 > li a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

ol.list-style-1 > li a:hover {
  color: #4d489e;
}

说明 #

• 每个ol.list-style-1都会重置item计数器，确保从1开始编号
• 顶级列表使用counter(item)生成单级编号，嵌套列表使用counters(item, ".")生成多级编号（如1.1、1.2）
• 选择器保持简洁，同时确保不会被Bootstrap等框架的样式覆盖

如果仍有问题，可以进一步提高选择器优先级，例如：

.table-responsive td ol.list-style-1 {
  counter-reset: item;
}

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