counter-reset在章节内不生效，根本原因是它只影响后代中后续的counter-increment调用，且必须配合counter-increment和::before/content才能显示编号；单层用counter()，多级嵌套必须用counters()。
为什么 counter-reset 在章节内不生效？
直接在章节容器上写 counter-reset: section; 通常没反应，根本原因是：CSS 计数器不会自动绑定到元素内容，必须配合 counter-increment 和 content（常用于 ::before）才能显示。而且重置行为只影响其**后代元素中后续的 counter-increment 调用**，对已渲染的序号无回溯作用。
常见错误现象：<h2 class="chapter">第二章</h2> 后面的 <h3> 仍延续第一章的编号；或者重置后序号变成 0 或空白。
- 确保目标章节容器（如
<section>或带 class 的<div>）设置了counter-reset: section; - 所有需要编号的子标题（如
<h3>）必须显式调用counter-increment: section; - 编号显示必须通过
h3::before { content: counters(section, ".") ". "; }这类伪元素注入，不能靠 HTML 自带序号
counters() 和 counter() 怎么选？
单层章节编号用 counter()，多级嵌套（如 “2.3.1”）必须用 counters() —— 它能拼接祖先计数器值，counter() 只取当前层级。
例如：父级 <section> 设 counter-reset: chapter;，子级 <article> 设 counter-reset: section;，那么 h4::before { content: counters(chapter, ".") "." counters(section, ".") " "; } 才能得到 “2.3.1”；若错用 counter(section)，只会输出末位数字。
立即学习“前端免费学习笔记（深入）”；
-
counter(name)：仅当前计数器值，适合一级列表或独立编号 -
counters(name, ".")：从最近的祖先counter-reset开始向上拼接，分隔符由第二个参数指定 - 如果嵌套层级未设
counter-reset，counters()会跳过该层，导致编号断档
HTML 编辑器里怎么避免样式被覆盖？
多数富文本编辑器（如 TinyMCE、CKEditor）默认给标题加内联样式或封装在 <p> 里，导致你写的 h3::before 规则不匹配。关键不是“怎么写 CSS”，而是“怎么让编辑器输出可被选中的语义化标签”。
- 优先启用编辑器的“Heading 标签模式”，禁用“样式类模拟标题”选项
- 若只能输出
<p class="heading-h3">，就得把 CSS 改成p.heading-h3::before并确保它比编辑器自带样式权重高（加!important是下策，应改选择器特异性） - 检查浏览器开发者工具里，目标元素是否真被你的
counter-reset规则命中（看 Computed 面板里的counter-reset值）
重置后序号从 1 开始但显示为 0？
这是最隐蔽的坑：counter-reset: section 0; 和 counter-reset: section; 效果不同。前者明确将计数器设为 0，后者设为 0 是规范默认行为，但某些旧版浏览器（如 IE11）可能解析异常；而 counter-increment: section; 每次在当前值基础上加 1，所以若重置为 0，第一次 increment 就得 0 + 1 = 1 —— 理论上没错，但若你误写了 counter-increment: section -1; 或用了 counter-set（非标准），就可能卡在 0。
- 始终用
counter-reset: section;（不带数字），让浏览器按规范初始化为0 - 避免混用
counter-set（目前仅 Firefox 支持，且行为不稳定） - 调试时临时加
h3::after { content: " [" counter(section) "]"; }查看实时计数值
真正麻烦的是跨编辑器兼容性：Safari 对 counters() 的嵌套深度支持较弱，如果章节嵌套超过 4 层，部分版本会截断；这时得考虑用 JS fallback 或扁平化结构。
