counter-set能直接跳到指定数字，其核心作用是重置计数器为任意整数值（如5、-2），不依赖之前状态，且优先级高于counter-reset；需置于目标元素自身上并确保计数器作用域有效。
counter-set 能不能直接跳到指定数字
可以，counter-set 的核心作用就是「重置」计数器为任意整数值，不是递增，也不依赖之前状态。它常被误认为只能设为 0，其实支持任何整数，包括负数、大数、0。
典型错误是写成 counter-set: my-counter 1; 却没声明计数器初始化，或放在没嵌套 counter-increment 的元素上导致无效——counter-set 只影响**后续兄弟/子元素中该计数器的起始值**，不改变当前元素的显示。
-
counter-set必须配合counter-reset或已存在的计数器作用域使用；单独在无上下文的<div>上设置不会“全局生效” - 值必须是整数（如
5、-2），不支持表达式或变量（CSS 自定义属性也不能直接代入counter-set） - 若同时存在
counter-reset和counter-set，后者优先级更高，会覆盖前者对同一计数器的初始值设定
怎么让 h2 标题从第 3 章开始编号
场景：文档前两章是引言/目录，不想编号，第三章正文才开始用「第 3 章」作为标题。这时不能靠反复 counter-increment，而要用 counter-set 直接切入。
关键点在于把 counter-set 放在**第一个需要显示「3」的标题元素自身上**，而不是它前面的容器：
立即学习“前端免费学习笔记（深入）”；
h2 {
counter-increment: chapter;
}
h2::before {
content: "第 " counter(chapter) " 章 ";
}
<p>/<em> 第一个正文章节标题 </em>/
h2.first-main-chapter {
counter-set: chapter 2; /<em> 注意：设为 2，因为 increment 会 +1，显示为 3 </em>/
}这里设 chapter 为 2，是因为 counter-increment: chapter 在渲染时会先执行（+1），再取值显示。所以起始设 2 → 显示 3。
counter-set 和 counter-reset 的行为差异
很多人混淆两者，以为只是写法不同。实际语义和时机完全不同：
-
counter-reset: name N：在**当前元素生成盒（box）时**，将计数器name设为N，并重置其在子树中的累加逻辑（即子元素的counter-increment从此新值开始） -
counter-set: name N：在**当前元素的计数器作用域内**，将name设为N，且这个值会传递给后续兄弟元素（非子元素），不影响子树重置逻辑 - 如果父元素用了
counter-reset: foo 10，子元素又写counter-set: foo 5，那么该子元素的兄弟节点中foo就从 5 开始，而非 10
简单记：reset 是“新建一个计数器实例”，set 是“在现有链路上手动拨动指针”。
为什么设置了 counter-set 却没生效
最常见原因不是语法错，而是作用域断了——CSS 计数器只沿 DOM 树向下传递，不跨 display: none / flex / grid 容器隐式截断，但会受 content-visibility: hidden 或 contain: counters 影响。
- 确保目标元素有继承计数器的路径：父元素至少声明过
counter-reset或同名counter-set，否则counter-set无作用对象 - 不要在
display: contents元素上设counter-set，它不生成盒，无法承载计数器状态 - 检查是否被更宽泛的选择器覆盖，比如全局
* { counter-reset: item };会冲掉你精心写的counter-set - 浏览器兼容性没问题：Chrome 85+、Firefox 68+、Safari 15.4+ 均支持，但旧 Safari 对
counter-set在伪元素中行为不稳定
真正难调的不是怎么写，而是搞清「这个值到底传给了谁、又被谁读取了」——建议用 DevTools 的 Layout 面板勾选 “Show counters”，或临时加 outline: 1px solid red 看作用域边界。
