counter-increment 是css中用于递增计数器变量的属性，本身不显示数字，需配合::before/::after伪元素及content: counter()才能渲染；必须与counter-reset配合设置初始值，并注意作用域、大小写敏感及display类型限制。
counter-increment 是什么，它不自动显示数字
counter-increment 只负责「让计数器变量加一」，它本身不会把数字渲染到页面上。很多人写了 counter-increment: section; 却看不到任何数字，就是因为漏了 content + counter() 这一步。
它必须和 ::before 或 ::after 伪元素配合使用，靠 content: counter(section); 把值取出来显示。
常见错误现象：
– 页面没变化，检查是否用了 display: none 或父元素隐藏了伪元素
– 数字从 0 开始，是因为没设初始值（见下一条）
– 多级编号错乱，大概率是没用 counter-reset 分层重置
怎么初始化计数器并控制起始值
计数器默认从 0 开始递增。要让它从 1 开始（比如第一节标“1”），得用 counter-reset 显式设初值：
h2 {
counter-increment: section;
}
h2::before {
content: counter(section) ". ";
}
section {
counter-reset: section 1;
}
counter-reset: section 1 表示：在每个 <section></section> 元素内，把名为 section 的计数器重置为 1；之后该 <section></section> 内的每个 h2 触发一次 counter-increment: section，就变成 2、3、4…
注意：
– counter-reset 值可以是任意整数（支持负数）
– 不写数值时默认重置为 0（counter-reset: section 等价于 counter-reset: section 0）
– 它作用于**当前元素的子树**，不是全局重置
多级编号（如 1.1、1.2、2.1）怎么嵌套
靠多个计数器 + counter() 的第二个参数实现嵌套格式：
section { counter-reset: section; }
section > h2 { counter-increment: section; }
section > h2::before {
content: counter(section) ". ";
}
article { counter-reset: subsection; }
article > h3 { counter-increment: subsection; }
article > h3::before {
content: counter(section) "." counter(subsection) " ";
}
关键点：
– counter(section) 取外层计数器值，counter(subsection) 取内层
– counter(section, decimal) 中的 decimal 是可选样式（还有 lower-roman、upper-alpha 等），不写则默认十进制
– 没有“自动继承层级”的语法，每一级都得手动声明 counter-increment 和 counter-reset
兼容性和容易被忽略的边界情况
现代浏览器（Chrome 2+、Firefox 1+、Safari 3.1+、Edge 12+）都支持 counter-increment，但有几点实际中常踩坑：
– counter-increment 对 display: none 元素依然生效（只要 DOM 存在，就会递增）
– 它只对**块级或生成盒的元素**有效；对 <span></span> 这类行内非替换元素设 counter-increment 无效（除非先设 display: inline-block）
– 计数器名称区分大小写：counter-reset: Section 和 counter-increment: section 是两个独立计数器
– 动态插入元素（如 JS append）会触发重新计算，但旧版 Safari 在某些 flex/grid 场景下可能延迟更新
真正麻烦的从来不是语法，而是计数器作用域和重置时机——比如在一个列表里混用 <ol></ol> 和自定义 counter-increment，稍不注意数字就跳变或重复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
