免费在线CSS计数器生成器，可视化创建CSS自动编号。支持 counter-reset、counter-increment、counter() 和 counters() 函数。可自定义计数器名称、初始值、编号样式（decimal/upper-roman/lower-alpha等）。实时预览编号效果，一键复制CSS代码。无需注册。
可视化·实时预览·零依赖·可离线使用添加计数器并配置编号方式，实时预览自动编号效果
/* 请先添加计数器 */
CSS计数器（CSS Counters）是CSS内置的自动编号机制，通过counter-reset、counter-increment属性和counter()/counters()函数实现元素自动编号。支持嵌套计数器（如1 -> 1.1 -> 1.1.1）。
| 属性/函数 | 说明 | 示例 |
|---|---|---|
counter-reset | 创建或重置计数器 | counter-reset: section 0; |
counter-increment | 递增计数器 | counter-increment: section; |
counter(name) | 获取计数器的当前值 | content: counter(section); |
counter(name, style) | 按指定样式显示 | content: counter(section, upper-roman); |
counters(name, sep) | 嵌套计数器显示 | content: counters(section, ".") |
| 样式值 | 效果 | 说明 |
|---|---|---|
decimal | 1, 2, 3 | 十进制数字（默认） |
lower-roman | i, ii, iii | 小写罗马数字 |
upper-roman | I, II, III | 大写罗马数字 |
lower-alpha | a, b, c | 小写字母 |
upper-alpha | A, B, C | 大写字母 |
1. 输入计数器名称（如 section、figure、item）。
2. 设置初始值（通常为0）和递增值（通常为1）。
3. 选择编号样式（decimal/roman/alpha等）。
4. 点击「添加」将计数器加入列表，实时预览自动编号效果。
5. 调整任意参数，预览和CSS代码实时更新。
6. 点击「复制代码」将生成的CSS代码复制到剪贴板。
支持。CSS计数器会自动处理父子嵌套关系。对于嵌套计数器，可以使用 counters(name, separator) 函数，如 content: counters(section, ".") 会生成 "1"、"1.1"、"1.1.1" 等编号。
counter-reset 通常在父元素上设置，counter-increment 和 content: counter() 在需要编号的子元素上设置。计数器必须在 ::before 或 ::after 伪元素的 content 属性中显示。
常见原因：①元素没有 display 属性或值为 none；②counter-reset 未在父元素上设置；③content: counter() 没有放在伪元素（::before 或 ::after）中。
HTML <ol> 列表内部使用CSS计数器实现自动编号。通过自定义计数器，可以在非列表元素（如 <h1>、<div>）上实现章节编号、图表编号等功能。