counter-reset不生效主因是作用域错误：须设在块级父容器（非inline/压扁元素）上，子元素再用counter-increment和counter()；::before显示需content非空且含counter()；多计数器需命名隔离；IE11不支持counters()和格式参数。
为什么 counter-reset 不生效？检查作用域和继承链
最常见的问题是把 counter-reset 写在了没有子元素的元素上，或者写在了不会渲染伪元素的容器里。CSS 计数器依赖「块级上下文」和「继承机制」：父元素必须设置 counter-reset，子元素（或其 ::before）才能用 counter-increment 和 counter() 读取。如果父元素是 display: inline，或被 overflow: hidden + height: 0 等方式“压扁”，计数器可能不触发初始化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保重置计数器的元素是目标列表项的直接或间接父容器，且为块级（如
<ol></ol>、<div class="list">） <li>避免在 <code>display: flex或display: grid容器上直接设counter-reset后又用flex-direction: column-reverse——顺序反转可能导致计数错位 - 调试时可在父元素加
outline: 1px solid red确认它是否真实包裹了目标元素 - 每个要编号的项（如
<li>或<p class="step"></p>）需单独设counter-increment: item，不能只靠父级counter-reset -
content中拼接字符串要用引号，例如：content: counter(item) ". "；漏掉引号会导致语法错误，浏览器静默忽略整条规则 - 若想补零（如 01、02），CSS 原生不支持，得用 JS 或预处理器；纯 CSS 可改用
list-style-type: decimal-leading-zero配合<ol></ol>，但不适用于任意元素 - 章节标题用
h2设counter-reset: subsection，段落用p.section-item设counter-increment: subsection，这样每级h2下的subsection从 0 重新开始 - 避免在同一个选择器里既
counter-reset又counter-increment同一名字，容易导致值跳变（如重置后立刻加 1，跳过 0） - 调试嵌套计数器时，可用
content: counters(section, ".") "–" counter(subsection)在同一伪元素中查看层级关系 - 若必须兼容 IE11，放弃
lower-alpha等格式，统一用decimal；用counters()的地方改用 JS 动态插入文本 - 现代项目可直接用
<ol type="A"></ol>或<ol start="3"></ol>替代简单场景，语义更清晰，无需 CSS 计数器 - 真正需要动态重置（如折叠面板展开后重新编号）时，CSS 计数器无能为力，必须用 JS 控制
data-counter属性再配合 CSS attr() —— 但注意 attr() 仅支持字符串，无法做运算
如何让 ::before 显示递增数字并自定义格式？
::before 要显示计数，必须同时满足三个条件：内容非空、有 content 声明、且该元素所在层级已执行过 counter-increment。格式控制靠 counter() 函数第二个参数，比如 counter(item, decimal)、counter(item, lower-roman)。
实操建议：
立即学习“前端免费学习笔记（深入）”；
多个计数器嵌套时，counter-reset 和 counter-increment 怎么配对？
一个元素可以重置多个计数器（counter-reset: section 0 subsection 0），也可以递增多个（counter-increment: section subsection）。关键在于命名唯一性和作用域隔离——子计数器应在子容器中重置，否则会污染上级计数。
实操建议：
立即学习“前端免费学习笔记（深入）”；
IE11 兼容性与现代替代方案的取舍
counter-reset / counter() 在 IE8+ 都支持，但 IE11 及更早版本不支持 counters()（多级嵌套）、不支持 counter() 的第二个参数（即固定为十进制），且对 ::before 的 content 渲染有时延迟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
计数器不是万能编号工具，它的强项是静态结构、无 JS 依赖的顺序标记；一旦涉及条件显示、异步加载或用户交互重排，就得让位给 JS 控制的真实状态。
