CSS 计数器速查

对照 counter-reset、counter-increment、counter-set、content:counter() 与 counters() 等语法,理解计数器如何创建、递增与输出,并查看自动编号效果,支持关键词过滤与一键复制示例代码,全部在浏览器本地完成。

语法对照表 共 6 条语法
语法 说明

过滤器会同时匹配语法与说明,点击表格行可查看效果与示例代码。

计数器效果预览
  1. 第一章
    1. 第一节
    2. 第二节
  2. 第二章
    1. 第一节
当前语法counter-reset: name 0;
计数器名name
计数样式—
起始 / 递增0

预览区用真实 CSS 计数器自动编号,选择不同语法可切换编号样式。

示例代码

          

复制后可直接粘贴到样式表中,按需替换计数器名与选择器。

使用规则
  • 先用 counter-reset 在容器上创建计数器,再由子元素的 counter-increment 递增。
  • counter-reset 与 counter-increment 都可写成 名称 数值 的多个键值对。
  • 计数器需要在 ::before / ::after 的 content 中通过 counter() 输出。
  • 嵌套编号用 counters(name, "."),可自动拼接各层级,如 1.2。
  • 计数器是纯样式机制,不影响 DOM 结构,也不参与无障碍朗读顺序。