必须先用 counter-reset 初始化计数器，再用 counter-increment 触发递增，否则 counter() 显示为 0 或空白；counter() 和 counters() 需配合 ::before 等伪元素使用，且 counters() 依赖层级结构与命名隔离。
counter-reset 和 counter-increment 怎么配对用
必须先用 counter-reset 初始化计数器，再用 counter-increment 触发递增，否则 counter() 显示为 0 或空白。常见错误是只写 counter-increment 却漏掉 counter-reset，尤其在嵌套列表或自定义标题中容易忽略作用域。
计数器默认从 0 开始，counter-reset: my-counter 1 可设初始值；counter-increment: my-counter 2 表示每次加 2。
- 全局重置写在父容器（如
ol、section），避免子元素重复初始化 - 多个计数器可空格分隔：
counter-reset: section 0 figure 0 - 不要在伪元素外直接使用
counter-reset，它本身不渲染内容
::before 里用 counter() 插入序号的写法
counter() 必须配合伪元素（通常是 ::before）才能显示，单独写在普通选择器里无效。它返回字符串，所以能和文字拼接，但不能参与 CSS 数学计算（比如不能用在 width: calc(counter(my-count) * 1rem) 中）。
示例：给每个 h2 自动加「2.1」「2.2」这类带前缀的编号：
h2 {
counter-increment: section;
}
h2::before {
content: "§ " counter(section) ". ";
font-weight: bold;
}
-
counter(section)输出纯数字，counters(section, ".")才支持嵌套层级（如1.1、1.1.1） -
content中所有文本、空格、符号都需用引号包裹，包括小数点、冒号等 - 若序号后需接实际标题文字，确保
h2::before不覆盖h2原有内容（它只是前置插入）
嵌套结构下 counters() 的层级控制要点
当需要多级编号（如文档大纲、带子项的目录），counters() 是唯一选择，但它依赖 DOM 层级和 counter-reset 的位置关系。常见问题：子级编号不重置、层级符号错乱、中间某层丢失计数。
关键规则：每级容器都要有自己的 counter-reset，且子级的 counter-reset 会隐式重置同名计数器——所以必须用不同名称或利用嵌套自动继承。
- 推荐命名按层级区分：
counter-reset: chapter→counter-reset: section→counter-reset: subsection - 用
counters(section, ".")时，只有被counter-reset的祖先元素才会出现在层级串中 - 如果某级不希望显示编号（如隐藏的分组 div），别给它设
counter-reset，否则会干扰后续计数
兼容性与不可见字符导致的排版异常
IE8+ 和所有现代浏览器都支持 counter-reset/counter-increment/counter()，但 Safari 旧版本对 counters() 的分隔符处理偶有空格 bug。真正容易被忽略的是：伪元素插入的序号属于“生成内容”，无法被选中、复制或被屏幕阅读器自然识别为标题序号。
- 若需语义化（如无障碍访问），应在 HTML 中保留真实数字，CSS 计数器仅作视觉增强
- 序号前后若有零宽空格、软连字符等不可见字符，可能破坏对齐，建议在
content中显式控制空格："§" counter(section) ". " - 行内替换元素（如
img、input）上无法使用::before插入计数器，得换用包装容器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
