CSS counter-set 与 counter-reset 怎样影响嵌套编号

counter-reset 会创建一个新的计数器实例，适合在嵌套列表入口建立新一层编号；counter-set 优先给当前作用域中已有的同名计数器赋值，没有对应实例时才创建。因此，把嵌套入口的 reset 换成 set，可能改变外层编号，而不是得到一层独立编号。

文档入口：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/counter-set

从子列表影响外层编号的现象入手

阅读嵌套编号样式时，我更愿意先找“实例在哪里创建”，再看数字设成几。原因是属性名里的 reset 很容易被理解成普通赋值，而真正影响嵌套关系的是新实例。本篇用一个假设的文档目录场景拆解问题，不把示例写成亲历线上事故。

触发条件通常很具体：外层已经存在 item 计数器，子列表入口又使用 counter-set: item 0。此时不能假定子列表自动获得独立层次。后面的项目可能继续修改同一个实例，最终看起来像“返回父列表后编号跳了”。

把同名计数器实例画清楚

计数器的名称与实例不是一回事。嵌套作用域可以存在多个同名实例。counter() 取可见的内层值，counters() 可以把多个同名层次连接起来。因此多级目录显示成1.1、1.2，依赖的是层次信息，而不只是某个整数。

修复嵌套初始化与中途跳号

下面让每个 ol 创建 item 实例，让每个 li 步进一次，再使用 counters 显示层级。只有需要跳号的项目设置当前值，不在嵌套入口用 set 代替 reset。

基础介绍
    
范围说明
      
使用条件
    
  
附加章节
  
后续章节

/* 每个列表容器创建独立实例，子列表保留外层层级。 */
.outline,
.outline ol {
  list-style: none;
  counter-reset: item 0;
}

/* 常规项目负责步进，伪元素只负责显示。 */
.outline li {
  counter-increment: item;
}

.outline li::before {
  content: counters(item, ".") " ";
}

/* 同一元素先增量、后赋值，所以本项最终取值为5。 */
.outline li.jump {
  counter-set: item 5;
}

按这份结构，外层第一项对应1，两个子项对应1.1与1.2；跳号项目对应5，接下来的同级项目对应6。这些是示例语义的预期，本文没有提供虚构的浏览器运行截图。

复查属性顺序和选择器命中范围

同一元素上，计数器的创建、增量与赋值有既定处理顺序，不能靠 CSS 声明写在前还是后改变先增量后赋值的关系。若本项希望显示5，就把 counter-set 写成5，不必为了该项上的 counter-increment 预先减一。

另一个常见原因是选择器范围过大。例如某条规则命中了所有后代 li，却把用于初始化的声明也放在 li 上，于是每个项目都创建新实例。我的取舍是让“创建层次”和“改变当前值”分别落在容器与项目上，减少读样式时需要同时追踪的条件。

若出现差异，先检查真实 DOM 的父子与兄弟关系，再看元素及伪元素上的 reset、increment、set 是否叠加。源码层级发生变化时，计数器作用域也可能跟着变化；视觉上缩进相同并不能证明 DOM 层级相同。

避免把生成编号当成唯一业务内容

纯装饰性编号适合用 CSS 计数器。若编号是合同条款、引用锚点或导出数据的一部分，我会优先把稳定编号保留在内容或业务模型中，避免只靠伪元素承担唯一信息。复制、打印和辅助技术读取的具体表现还需要在产品目标环境中确认。

counter-set 总不会新建吗？不是，没有对应实例时也会创建。reset 必须设成零吗？不是，可以指定起始值，但要结合步进后的显示目标。子列表想重新从1开始怎么办？本例在子 ol 上 reset 为0，子 li 再 increment，即可表达这种需求。

规范参考：https://www.w3.org/TR/css-lists-3/