如何利用 CSS 计数器实现 DOM 节点位置索引避免手动维护序号-js教程-PHP中文网

CSS计数器可自动为同级DOM节点生成位置索引：通过counter-reset重置、counter-increment递增、counter()或counters()显示，支持单层编号与多级嵌套，无需JS且性能优越。

如何利用 css 计数器实现 dom 节点位置索引避免手动维护序号

可以用 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”这类格式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

父级用 counter-reset: section
子级同时做 counter-increment: section 和 counter-reset: subsection
用 content: counters(section, ".") 拼接层级

例如：

触发一级计数，在其下自动显示 “2.1”“2.2” 等，结构清晰，样式与语义解耦。

配合伪元素灵活展示索引

索引不只是数字前缀，还能驱动样式变化：

用 counter(item-index) 做计算参数，如 background: hsl(calc(counter(item-index) * 30), 70%, 60%)
结合 :nth-child 做条件样式（如奇偶行不同背景），再用计数器显示真实序号，二者互补不冲突
隐藏原生编号，改用自定义 counter() 控制外观，更易统一设计语言

整个过程不修改 DOM，不触发重排，性能友好，也避免了 JS 维护索引时常见的边界错误和异步延迟问题。