CSS计数器需配对使用counter-reset与counter-increment，名称严格一致；通过::before中content: counter()注入编号，支持多级嵌套与跨元素连续编号，比<ol>更灵活可控。
CSS counter-reset 和 counter-increment 怎么配对用
自动编号不靠写死的 <ol>，核心是 CSS 计数器机制：先用 counter-reset 初始化一个计数器（比如叫 section），再在要编号的元素上用 counter-increment 触发自增。两者名字必须完全一致，大小写敏感，拼错就无效。
常见错误是只写 counter-increment: section; 却漏了父容器的 counter-reset: section;，结果所有编号都显示为 0 或根本不出数字。
-
counter-reset通常放在最外层容器（如<article>或<main>）上，也可设初始值：counter-reset: section 0;（默认就是 0） -
counter-increment放在每个需编号的块级元素上，比如h2、.step、.question - 支持多级嵌套：父级用
counter-reset: chapter;，子级用counter-reset: section;+counter-increment: section;，再配合counters()拼接
::before 里怎么用 content: counter() 显示编号
编号本身不占 DOM，得靠伪元素注入。必须用 ::before（不能用 ::after 如果你想让编号在标题前面），且 content 属性值必须是 counter(名称) 或 counters(名称, 分隔符)。
典型写法：h2::before { content: counter(section) ". "; }。注意引号不能少，空格和标点都得手动写进字符串里；如果漏掉引号，浏览器会直接忽略整条规则。
立即学习“前端免费学习笔记（深入）”；
-
counter(section)只取当前层级值，适合一级编号 -
counters(section, ".")会回溯所有同名计数器并用点拼接，适合“1.2.3”这种多级结构 - 想加前缀（如“第 X 节”）就写：
content: "第 " counter(section) " 节"; - 不支持直接运算，比如
counter(section) + 1是无效语法
为什么 <ol> 不够用，非要用 CSS 计数器
<ol> 的编号绑定在语义结构上，一旦中间插入非列表项（比如说明文字、图片、代码块），编号就会断掉或错位；而 CSS 计数器完全脱离 HTML 结构，只认你指定的选择器——哪怕编号对象是 <div class="note"> 或 <p data-type="warning">，也能照常编号。
实际场景中，文档里的“注意事项”“示例”“陷阱”等非顺序内容，往往需要独立编号体系，这时混用多个 counter-reset（如 note、example）比硬套 <ol> 更灵活、更可控。
-
<ol>无法跨容器连续编号（比如两个分开的<section>里的<li>） - CSS 计数器可以跨任意元素类型、任意嵌套深度生效
- 打印 PDF 或导出静态页时，CSS 计数器生成的编号是纯样式，不影响语义可访问性（只要合理用 heading 标签）
IE 兼容性和 content 的隐藏风险
IE8+ 支持 counter-reset/counter-increment，但 IE9–11 对 counters() 的嵌套支持有 bug，比如多级编号可能重复或丢失层级；Edge 17+ 和所有现代浏览器无问题。真正容易被忽略的是：content 属性会让伪元素默认成为 display: inline，若编号需要换行或块级对齐，必须显式加 display: block 或 inline-block。
另一个坑：如果编号元素本身是 display: flex 或 grid 容器，::before 会参与布局，可能打乱原有排列，此时建议用 position: absolute 配合 left 控制位置，而非依赖文档流。
- 不要指望
content里的编号能被选中复制（部分浏览器允许，但不可靠） - 屏幕阅读器一般不读
content生成的内容，重要编号需额外加aria-label - 动态增删编号元素后，CSS 计数器会自动重算，无需 JS 干预——这是它比手写 JS 递增更稳的地方
真正难的不是写对那三行 CSS，而是想清楚编号逻辑该挂在哪一层、要不要重置、跨组件时命名会不会冲突。名字起太泛（比如全用 num）后期维护起来会很疼。
