css 的 counter() 函数不支持直接使用 css 变量作为计数器名，因其仅接受字面量标识符；可通过 counter-reset 与 calc(var(--start)) 控制起始值，并用 content 拼接变量实现前缀效果。
为什么不能直接在 counter() 里用 CSS 变量？
CSS 的 counter() 函数不接受变量作为计数器名或值，它只认字面量标识符（比如 counter(section)），而 var(--counter-name) 在这里会被当作字符串字面量处理，不是有效的计数器引用。浏览器会静默忽略或报错（如 Chrome 显示 invalid counter name）。
用 counter-reset 和 counter-increment 配合自定义属性控制起始值
真正可控的入口是计数器的初始化和递增行为，CSS 变量可以参与计算后注入到这些声明中——但只能通过 calc() 或媒体查询/伪类条件间接影响，不能动态改名。实际做法是：固定计数器名，用变量控制起始编号。
-
counter-reset: section calc(var(--start, 0) + 1);—— 起始值可由变量驱动（注意：calc()仅支持数值，不能拼接字符串） - 必须确保
--start是数字类型，否则calc()失效，计数器退化为默认 0 - 多个层级嵌套时，避免用同一变量控制不同计数器，否则重置逻辑会冲突
用 content 拼接变量与计数器实现“前缀+编号”效果
单独的 counter() 输出纯数字，但你可以把 CSS 变量作为前缀拼进 content，形成类似 “第 1 章”、“App-2”的动态格式。
h2::before {
content: var(--prefix, "Section") " " counter(section);
counter-increment: section;
}
-
--prefix必须定义在生效作用域（如元素自身、父容器或 :root），否则 fallback 值生效 - 空格需显式写在字符串里，
var(--prefix)" "不合法，必须是var(--prefix) " " - 如果需要序号带括号或点号（如 “1.”），得用
counter(section, decimal)并手动拼接，不能靠变量替换计数器样式
遇到 counter() 不更新或编号跳变怎么办？
这不是变量问题，而是 DOM 结构或 CSS 作用域导致的计数器生命周期异常。常见诱因：
- 父元素设置了
counter-reset却没包含所有目标子项（比如用了display: none或visibility: hidden的元素仍参与计数） - 使用了
content: counter(x) counter(x)这种重复调用，某些旧版 Safari 会多加 1 - 变量在 JS 动态修改后，
counter-increment不会自动重算——计数器状态由渲染树决定，不是响应式变量 - 想用 JS 控制编号？别碰 CSS 计数器，直接用
data-*属性 +::before { content: attr(data-num); }更可靠
真正难的不是拼变量，是理解计数器绑定的是 DOM 树结构，而不是 CSS 声明顺序。变量能调的只是静态入口参数，一旦计数开始，就脱离变量控制了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
