嵌套标题中CSS counter系列属性的正确用法及reset失效问题

问题根源 #

当你给每个标题套上settingsControlGroup容器后，CSS计数器的重置作用域和选择器匹配关系被打破了。原来的counter-reset规则是直接作用在.numberedHeadings下的标题元素上，现在标题被嵌套了一层，若选择器未对应调整，重置指令就无法正确关联到后续的计数器递增逻辑。

修正方案 #

以下是调整后的完整CSS代码示例，核心是确保计数器的初始化、重置、递增在正确的层级上关联：

/* 最外层容器初始化主计数器（章节） */
.numberedHeadings {
  counter-reset: chapter 0;
}

/* 匹配被包裹的h1标题：递增章节计数器，同时重置小节计数器 */
.numberedHeadings .settingsControlGroup h1.chapterHeading {
  counter-increment: chapter;
  counter-reset: section 0;
}

/* 匹配被包裹的h2标题：递增小节计数器 */
.numberedHeadings .settingsControlGroup h2.chapterHeading {
  counter-increment: section;
}

/* 为h1添加计数器显示 */
.numberedHeadings .settingsControlGroup h1.chapterHeading:before {
  content: counter(chapter) " ";
  margin-right: 8px;
}

/* 为h2添加嵌套计数器显示 */
.numberedHeadings .settingsControlGroup h2.chapterHeading:before {
  content: counter(chapter) "." counter(section) " ";
  margin-right: 8px;
}

关键注意事项 #

• 计数器作用域：counter-reset必须设置在需要递增该计数器的元素的祖先元素上（比如主计数器chapter在最外层.numberedHeadings初始化，确保所有子标题都能共享这个计数器）。如果把counter-reset写在settingsControlGroup上，每个容器都会重置计数器，导致编号混乱。
• 选择器准确性：必须明确匹配到嵌套后的标题元素，避免后续样式冲突。
• 计数器名称一致性：确保counter-reset、counter-increment、counter()里的名称完全一致（比如都是chapter/section，不要拼写错误）。

排查技巧 #

如果还是失效，检查以下几点：

• 是否有更高优先级的CSS规则覆盖了counter-reset或counter-increment？可以用浏览器开发者工具查看元素的样式面板，确认计数器规则是否生效。
• 确认counter-reset的元素确实是目标标题的祖先，DOM层级不能断。
• 检查伪元素::before/::after是否被其他样式（比如display: none）隐藏了。

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