CSS计数器生成器
在线CSS计数器生成器，生成counter-reset/counter-increment自动编号样式，支持前缀后缀和多种编号格式，适用于章节目录与步骤列表排版。
计数器设置
预览
1.第一个项目
2.第二个项目
3.第三个项目
CSS 代码
body {
counter-reset: section 1;
}
.item {
counter-increment: section 1;
}
.item::before {
content: "" counter(section, decimal) ".";
margin-right: 0.5em;
font-weight: bold;
color: #f59e0b;
}HTML 结构
<div class="item">第一个项目</div>
<div class="item">第二个项目</div>
<div class="item">第三个项目</div>
<div class="item">第四个项目</div>文档与说明
什么是 CSS 计数器？
CSS 计数器是 CSS 提供的强大能力，可以为元素自动编号。相比传统的有序列表（ol），它更灵活，可用于任意元素，并支持自定义起始值、增量、编号样式以及前缀后缀。
CSS 计数器常用于文档章节编号、文章列表、步骤说明等场景。通过 counter-reset、counter-increment 与 counter() 函数，可以实现多级编号与更复杂的自动编号效果。
如何使用本工具
- 设置计数器名称、起始值和增量
- 选择编号样式（数字、字母、罗马数字等）
- 可选：添加自定义前缀和后缀
- 查看预览效果
- 复制 CSS 和 HTML 代码到项目中
核心功能特性
- 自定义名称：支持任意有效的 CSS 标识符作为计数器名称
- 灵活起始值：可设置任意整数作为起始值
- 自定义增量：支持正数、负数和零作为增量值
- 多种样式：支持数字、字母、罗马数字等多种编号样式
- 前缀后缀：可添加自定义的前缀和后缀文字
- 实时预览：参数修改后立即看到效果
常见问题 (FAQ)
CSS 计数器和有序列表有什么区别？
CSS 计数器比有序列表更灵活。有序列表通常只用于 li 的简单编号；CSS 计数器可用于任意元素，并能自定义起始值、增量、编号样式，还能实现嵌套与多级编号。
如何在多个页面上保持计数器连续？
CSS 计数器会随页面加载而重新开始。若需要跨页面连续编号，通常需要在服务端或 JavaScript 中保存并恢复计数器值。本工具主要用于单页内的自动编号需求。
浏览器兼容性如何？
CSS 计数器属于 CSS2.1 规范的一部分，现代浏览器（Chrome、Firefox、Safari、Edge 等）均支持，IE8 及以上版本也支持。