css counters是纯css实现的命名计数器机制，支持多级嵌套编号；它通过counter-reset初始化、counter-increment递增、content+counters()输出层级编号（如1.1.2），自动响应dom变化，无需js或冗余class。

什么是 CSS counters 以及它为什么适合多级编号 CSS counter-reset 和 counter-increment 是原生支持嵌套计数的机制，不依赖 JS 或冗余 HTML class。它本质是 CSS 维护的一组命名计数器，每个作用域（如元素）可独立增减、显示。相比手动写 1.1、1.2.3，它自动响应 DOM 结构变化——新增子项、折叠某层、删掉中间节点，编号都会重算。 关键点在于：**计数器作用域由元素树决定，不是靠 class 名或层级深度硬编码**。这意味着只要 HTML 是语义化嵌套（比如 ol 套 ol，或 section 套 section），CSS 就能逐层映射。

用 counter-reset 和 counter-increment 搭建三级编号结构 以常见文档大纲为例：一级用 1、2，二级用 1.1、1.2，三级用 1.1.1、1.2.1。核心是为每级声明独立计数器，并在父级重置、子级递增：

假设结构是：article > section 表示一级，section > section 表示二级，section > section > section 表示三级：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

article {
  counter-reset: level1;
}
article > section {
  counter-reset: level2;
  counter-increment: level1;
}
article > section > section {
  counter-reset: level3;
  counter-increment: level2;
}
article > section > section > section {
  counter-increment: level3;
}

然后用 content: counters(...) 生成编号：

article > section::before {
  content: counters(level1, ".") ". ";
}
article > section > section::before {
  content: counters(level1, ".") "." counters(level2, ".") ". ";
}
article > section > section > section::before {
  content: counters(level1, ".") "." counters(level2, ".") "." counters(level3, ".") ". ";
}

注意：counters() 第二个参数是分隔符，它会把所有祖先同名计数器连起来（比如当前是 level2，就输出 “1.2”）；而 counter() 只取当前层值（比如只输出 “2”）。多数嵌套编号场景用 counters() 更直接。

为什么 counters() 的分隔符必须是字符串，且不能用空格或点号开头 counters() 的第二个参数会被当作字面量插入，但 CSS 解析器对空格和标点敏感。如果写成 counters(level1, " .")（前面带空格），会导致部分浏览器（如旧版 Safari）解析失败，编号消失；写成 counters(level1, ".") 是安全的，但后续拼接时要注意手动加空格——比如 content: counters(level1, ".") ". "，末尾的空格是写死的。 另一个坑：如果你希望编号后跟中文顿号（、）或括号，比如 1.1、，必须写成 counters(level1, ".") "、"，不能把顿号塞进 counters() 的分隔符里——否则会变成 1、1、 这种错误格式。 常见错误现象：content 显示为 NaN 或完全空白，大概率是计数器名拼错（比如 level1 写成 levle1），或 counter-increment 没有应用到实际渲染的元素上（比如写在 display: none 元素上）。

如何让编号支持任意深度，而不是硬写到 level3 CSS 本身不支持循环或变量深度，但可以用通配选择器配合统一计数器名模拟“无限级”。例如全部用 section，并统一管理一个叫 section 的计数器：

section {
  counter-increment: section;
}
section::before {
  content: counters(section, ".") ". ";
}
section section {
  counter-reset: section;
}

这里的关键是：section section 会重置所有子 section 的 section 计数器，而每个 section 自身又执行 counter-increment: section，于是形成嵌套自增。不需要预设 level1/level2，HTML 嵌套几层就生成几层编号。 但要注意兼容性：IE 不支持 counters()，只支持单层 counter()；如果需兼容 IE，只能退回到固定层级 + 手动 class 控制。 嵌套越深，counters() 的性能开销越明显，不过一般文档类页面（::before 中的 counters() 显示的是“该元素自身递增后的值”，不是子元素的值**——这决定了你永远不该在父容器上用 counters() 来显示子项编号。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！