能实现，但需正确设置 counter-reset 和 counter-increment 的作用域与嵌套关系：counter-reset 必须在列表容器（如 ol、ul 或 div）上声明以共享计数器，counter-increment 要放在编号元素上，并配合 ::before 中 content: counter() 显示；嵌套编号须用 counters() 并指定分隔符。
能实现，但要注意 counter-reset 和 counter-increment 的作用域与嵌套关系，否则编号会断、重置错或完全不显示。
counter-reset 必须在父容器上声明
很多人把 counter-reset 写在 li 上，结果每个 li 都重置一次，编号永远是 1。它必须作用于列表容器（如 ol、ul 或自定义的 div），才能让子元素共享同一个计数器。
-
ol默认自带counter-reset: list-item，所以纯ol > li不用额外写 - 想用自定义名称（比如
section），就得在容器上显式写：counter-reset: section - 如果容器是
div.list，且内部是p而非li，那counter-reset: section就必须加在div.list上
counter-increment 要放在要显示编号的元素上
编号递增动作和编号显示是两步，不能只写一个。常见错误是只加了 counter-increment 却忘了用 content + counter() 输出。
- 对每个
li或h2这类“计数单位”，需设置counter-increment: section - 要在伪元素（通常是
::before）里用content: counter(section)才能看到数字 - 支持格式化：比如
counter(section, lower-alpha)输出 a、b、c；counter(section, decimal-leading-zero)输出 01、02 - 注意：
counter()只能在content属性中使用，不能用在color或font-size里
嵌套编号要用 counters() 而不是 counter()
当有二级列表（如章节 + 小节），用 counter() 只能取最内层值，无法拼出 “2.3” 这样的效果。必须用 counters() 并指定分隔符。
- 外层容器设
counter-reset: chapter，内层容器设counter-reset: section - 内层元素同时写
counter-increment: chapter section - 用
content: counters(chapter, ".") "." counters(section, ".")是错的 ——counters()第二个参数是分隔符，不是连接符；正确写法是content: counters(chapter, ".")（自动含层级）或content: counters(chapter, ".") " " counter(section)拆开控制 -
counters()会按嵌套深度自动取所有同名计数器的值，所以两个counter-reset: section在不同层级，就真能生成 1.1、1.2、2.1 这种
真正容易被忽略的是计数器的作用域：它不依赖 DOM 层级是否连续，而依赖 CSS 选择器是否匹配到对应元素并执行了 counter-increment。如果中间某个 li 被 display: none 或未命中选择器，编号就会跳变——这不是 bug，是机制本身如此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
