纯css自动编号需三者协同：counter-reset在父容器初始化计数器，counter-increment在目标元素触发递增，content结合counter()或counters()在伪元素中显示编号。
纯CSS自动编号完全可行，但必须配合 counter-reset、counter-increment 和 content 三者协同使用；单独用其中任何一个都出不来编号效果。
为什么 counter-reset 必须放在父容器上
它定义计数器的起始值和作用域——就像给一个变量声明并初始化。如果写在子元素上，每次都会重置，编号就永远是1。
-
counter-reset: section;表示创建名为section的计数器，初始值为0（不是1） - 常见错误：把
counter-reset写在h2上，结果每个h2都从1开始编号 - 正确做法：写在包裹所有标题的父容器（如
article或main）上 - 支持多计数器：
counter-reset: section 0 subsection 1，可同时初始化多个并指定初值
counter-increment 要绑定到实际触发编号的元素
它才是真正让数字“走起来”的一步。不触发 increment，reset 就只是个摆设。
- 通常加在
h2、li、figure这类需要编号的元素上 -
counter-increment: section;表示每次遇到该元素，section计数器加1 - 可叠加递增：
counter-increment: section 2;（每次+2），或counter-increment: section subsection;（同时更新两个） - 注意：该属性本身不输出内容，只改变内部状态
用 content + counter() 函数显示编号
这是唯一能把计数器值“画出来”的方式，且只能用于 ::before 或 ::after 伪元素。
- 写法：
content: counter(section);—— 显示当前section值（从1开始，因 increment 后才读取） - 支持格式化：
content: counter(section, upper-roman);（I, II, III…）或decimal-leading-zero（01, 02…） - 嵌套编号要用
counters()：content: counters(subsection, ".");（生成 1.1, 1.2, 2.1…） - 常见错误：直接在普通元素上写
content（无效），或拼错计数器名（如counter(secion)→ 完全不显示）
嵌套层级深时，counters() 的分隔符和作用域容易错乱；建议先用简单单层编号验证逻辑，再逐层加嵌套。计数器名大小写敏感，且不能含空格或特殊符号——这些细节一旦出错，页面上就只剩一片空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
