counter-increment是CSS中用于递增计数器的属性，本身不显示编号，需配合counter-reset初始化和content+counter()/counters()输出；支持步长与负值，依赖伪元素渲染，不适用于动态DOM强管控场景。
counter-increment 是什么，它不等于自动编号本身
counter-increment 只负责「让计数器加一」，它本身不输出任何内容。很多人写完 counter-increment: section; 就以为标题会自动显示“1、2、3”，结果页面干干净净——因为没用 counter() 或 counters() 把值读出来。
它必须和 counter-reset（初始化计数器） + content（插入生成内容）配合使用才完整。
-
counter-reset: section;通常放在父容器上，比如article或ol，表示从 0 开始重置 -
counter-increment: section;放在要编号的元素上，比如h2，每次出现就 +1 -
content: counter(section);放在::before伪元素里，真正把数字塞进 DOM
给 h2/h3 做多级嵌套编号，用 counters() 而不是 counter()
如果只用 counter(section)，所有标题都平铺成 1, 2, 3… 无法体现层级。要实现 “1.1”、“1.2.3” 这类效果，必须用 counters() 函数，并传入分隔符。
关键点在于：每个层级需独立声明 counter-increment，且 counter-reset 要放在对应父级上。
-
article { counter-reset: section; }→ 重置一级计数器 -
h2 { counter-reset: subsection; counter-increment: section; }→ 每个 h2 推进一级，同时为子项准备二级计数器 -
h3 { counter-increment: subsection; }→ 仅推进二级，不干扰一级 h2::before { content: counter(section) ". "; }-
h3::before { content: counters(section, ".") "." counters(subsection) " "; }→ 输出如 “1.2.1”
counter-increment 的值可以是负数或步长，但别乱设初始值
counter-increment 支持形如 counter-increment: my-counter -2; 或 counter-increment: my-counter 3;，即每次增减任意整数。这在跳过编号、合并章节时有用。
但注意：counter-reset 才决定起点，counter-increment 只管“怎么变”。比如：
-
counter-reset: item 10;+counter-increment: item;→ 编号从 11 开始 -
counter-reset: item;+counter-increment: item 5;→ 编号为 5, 10, 15… - 不要写
counter-reset: item 0;再配counter-increment: item;期望从 1 开始——counter-reset: item;默认就是 0，更简洁
浏览器兼容性没问题，但要注意伪元素和 display 类型限制
counter-increment 和 counter() 在所有现代浏览器（Chrome/Firefox/Safari/Edge）中均支持，包括 iOS Safari 15.4+ 和 Android Chrome 90+。真正容易翻车的是使用方式：
- 必须用
::before或::after配合content才能显示，直接写在块元素上无效 - 如果目标元素是
display: inline（如span），content插入后仍保持内联，但编号可能挤在文字中间；建议对编号容器设display: inline-block控制对齐 -
counter()不能用于属性选择器或 JSgetComputedStyle()读取——它只是渲染时的计算值，不是真实 DOM 文本
最常被忽略的一点：CSS 计数器不感知 DOM 动态增删。用 JS 插入新 h2 后，浏览器会自动重算，但若手动修改了 counter-increment 的值或移除了某些元素，又没触发样式重排，编号可能滞留。真要动态控制，不如交给 JS 的 data- 属性 + attr() 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
