纯css变量无法直接用于counter()的样式参数，必须用counter-reset和counter-increment配合::before+content手动渲染序号，变量仅可控制前缀、后缀、颜色、字体等非计数逻辑部分。
用 counter-reset 和 --list-style-type 变量控制序号类型
纯 CSS 变量不能直接注入到 list-style-type 的值里（比如 list-style-type: var(--list-style-type) 会失效），因为该属性不接受自定义变量值。必须用 counter-increment + ::before + content 手动渲染序号，再把样式逻辑交给变量控制。
典型做法是：用 counter-reset 初始化计数器，用 counter-increment 每项递增，再在 ::before 中通过 content: counter(my-counter, <em>type</em>) 输出带样式的序号——其中 type 必须是字面量（如 decimal、lower-roman），不能是变量。所以“用变量控制样式”的真实路径是：用变量控制 ::before 的其他样式（颜色、字体、间距、前缀/后缀等），而非替换 counter() 的第二个参数。
-
--counter-prefix控制序号前缀（如"第 "） -
--counter-suffix控制后缀（如". "或") "） -
--counter-color控制序号文字颜色 -
--counter-font-weight控制粗细（常用于突出序号）
如何让不同列表复用同一套 counter 逻辑但样式独立
关键在作用域隔离：每个列表需有独立的 counter-reset 名称，并通过 CSS 自定义属性向下传递样式偏好。不能共用 counter-reset: item，否则嵌套或并列列表会互相干扰。
示例结构：
.list-a { --counter-type: decimal; --counter-suffix: ". "; counter-reset: list-a; }
.list-b { --counter-type: lower-alpha; --counter-suffix: ") "; counter-reset: list-b; }
<p>.list-item::before {
counter-increment: list-a; /<em> 注意：这里必须和 reset 名称一致 </em>/
content: counters(list-a, ".") var(--counter-suffix);
color: var(--counter-color, #333);
font-weight: var(--counter-font-weight, normal);
}</p>
⚠️ 容易踩的坑：counter-increment 的名称必须和 counter-reset 完全一致；counters() 第一个参数也一样。变量只影响 content 拼接部分或后续样式，不影响计数行为本身。
需要罗马数字/字母序号时，为什么不能用变量传入 counter()
CSS 规范明确限定 counter() 和 counters() 的第二个参数（style）必须是预定义关键字，浏览器不解析变量值。写成 counter(step, var(--counter-type)) 会被忽略，回退为 decimal。
替代方案只有两个：
- 为每种样式写独立规则（如
.list-roman .item::before { content: counter(i, lower-roman) }） - 用 JS 动态切换 class（如
class="list list--roman"），再用对应 CSS 规则覆盖content
如果坚持纯 CSS + 变量驱动，只能把变化限制在「非计数逻辑」部分：比如用 var(--counter-prefix) 拼在序号前，用 var(--counter-suffix) 拼在后，用 var(--counter-font-size) 控制大小——这些都合法且稳定。
嵌套列表中 counters() 和变量配合的注意事项
counters() 适合嵌套场景（如 1.1、1.1.1），但它不支持变量作为分隔符。也就是说，counters(section, var(--nest-sep)) 无效，--nest-sep 必须硬编码进 CSS。
可行做法是预先定义几组常用分隔符组合：
.list-nested-dot { --nest-sep: "."; }
.list-nested-dash { --nest-sep: "-"; }
<p>.list-nested-dot .item::before {
content: counters(section, ".") ". ";
}
.list-nested-dash .item::before {
content: counters(section, "-") "- ";
}</p>
真正灵活的点在于：你可以用变量控制 ::before 的 margin-left、display、是否 text-transform 等，但计数器的格式化逻辑（进制、大小写、分隔符）仍得靠多套 CSS 规则兜底。
最易被忽略的是：counter-reset 在嵌套容器上要重新声明，否则子层级不会从 1 开始；而变量继承是自动的，所以父容器设 --counter-color: red，子项 ::before 直接 color: var(--counter-color) 就能生效——这部分才是变量真正省事的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
