CSS计数器可自动为同级DOM节点生成位置索引：通过counter-reset重置、counter-increment递增、counter()或counters()显示，支持单层编号与多级嵌套，无需JS且性能优越。
可以用 CSS 计数器（counter-reset、counter-increment 和 counter()）自动为同级 DOM 节点生成位置索引，完全无需 JavaScript 或手动写死序号。核心是让浏览器在渲染时动态计数，既轻量又可靠。
基础三步法：重置 → 递增 → 显示
这是实现自动索引最简明的逻辑链：
-
在父容器上设置
counter-reset：声明一个计数器名称，并指定起始值（默认为 0） -
在每个目标子元素上加
counter-increment：每匹配一次该元素，计数器就加 1 -
用
::before或::after的content: counter(...)把当前数值插入内容中
单层列表自动编号
适用于导航菜单、步骤条、侧边栏条目等线性结构：
.list {
counter-reset: item-index;
}
.list-item {
counter-increment: item-index;
}
.list-item::before {
content: counter(item-index) ". ";
font-weight: bold;
}这样，无论你增删多少个 .list-item，序号都会自动连续更新，且不依赖 HTML 中的 value 或 data-index 属性。
立即学习“前端免费学习笔记（深入）”；
嵌套结构支持多级编号
比如文档大纲、多层菜单或带子项的 FAQ 列表，可用 counters() 实现“1.1”“1.2.3”这类格式：
- 父级用
counter-reset: section - 子级同时做
counter-increment: section和counter-reset: subsection - 用
content: counters(section, ".")拼接层级
例如：<h2></h2> 触发一级计数，<h3></h3> 在其下自动显示 “2.1”“2.2” 等，结构清晰，样式与语义解耦。
配合伪元素灵活展示索引
索引不只是数字前缀，还能驱动样式变化：
- 用
counter(item-index)做计算参数，如background: hsl(calc(counter(item-index) * 30), 70%, 60%) - 结合
:nth-child做条件样式（如奇偶行不同背景），再用计数器显示真实序号，二者互补不冲突 - 隐藏原生
<ol></ol>编号，改用自定义counter()控制外观，更易统一设计语言
整个过程不修改 DOM，不触发重排，性能友好，也避免了 JS 维护索引时常见的边界错误和异步延迟问题。
