Skip to main content
FreeToolkit .ai

CSS 计数器生成器 为自定义编号列表生成 CSS 计数器，支持各种样式和嵌套。

CSS 计数器生成器 illustration
🎨

CSS 计数器生成器

为自定义编号列表生成 CSS 计数器，支持各种样式和嵌套。

1

配置计数器

设置计数器名称、样式（十进制、罗马数字、字母）、前缀和后缀。

2

启用嵌套

可选地启用带有自定义分隔符字符的嵌套计数器。

3

复制CSS

预览编号列表并复制完整的计数器CSS。

Loading tool...

What Is CSS 计数器生成器?

CSS 计数器生成器使用 CSS counter-reset、counter-increment 和 content 属性创建自定义编号列表。CSS 计数器比标准的有序列表编号更具灵活性，支持各种编号样式、自定义前缀和后缀、嵌套编号以及与 list-style-type 无关的样式设置。本工具允许您配置计数器名称，从十种编号样式中选择（包括十进制、带零的十进制、小写/大写字母、小写/大写罗马数字、希腊语等），设置自定义前缀和后缀文本，并可选地启用嵌套计数器，具有可配置的分隔符。预览显示了应用于示例列表上的计数器，生成的 CSS 包括所有必要的计数器属性。

Why Use CSS 计数器生成器?

  • 包括十进制、罗马数字和字母在内的十种编号样式
  • 自定义前缀和后缀文本围绕计数器值
  • 支持嵌套计数器，具有可配置的分隔符
  • 带有真实列表内容的预览

Common Use Cases

法律文件

为法律和技术文档创建嵌套编号部分（1.1、1.2、2.1）。

分步指南

使用样式化计数器构建自定义编号步骤。

目录

为文档目录生成层次编号。

自定义有序列表

用样式化的自定义计数器替换默认列表编号。

Technical Guide

CSS 计数器使用三个主要属性：counter-reset 初始化父元素上的一个计数器，counter-increment 增加子元素上的计数器，而 content 属性中的 counter() 或 counters() 显示值。counter-reset 属性创建一个新的计数器实例：counter-reset: section。counter-increment 提高它：counter-increment: section。在 ::before 伪元素上，content 属性显示计数器：content: counter(section)。counter() 函数接受一个可选的样式参数：counter(section, upper-roman)。对于嵌套计数器，每个级别重置其自己的子计数器。counters() 函数（注意 's'）处理嵌套范围：counters(section, ".") 生成 "1.2.3" 表示法。可用的列表样式类型包括 decimal、decimal-leading-zero、lower-alpha、upper-alpha、lower-roman、upper-roman、lower-greek 等。可以定义和独立使用多个计数器。

Tips & Best Practices

  • 1
    在父元素上使用counter-reset，在子元素上使用counter-increment
  • 2
    使用带有分隔符的counters()实现嵌套编号，如1.1.1
  • 3
    自定义前缀和后缀文本使计数器适用于法律文件
  • 4
    CSS计数器可与任何元素一起工作，而不仅仅是列表

Related Tools

CSS 表格生成器 - free online tool

CSS 表格生成器

使用可自定义颜色、条纹和悬停效果来创建漂亮的 HTML 表格。

🎨 CSS & Design
字体尺寸比例生成器 - free online tool

字体尺寸比例生成器

使用可自定义的基本大小、比率和单位来生成模块化的字体尺寸比例。

🎨 CSS & Design
CSS 变量生成器 - free online tool

CSS 变量生成器

为颜色、间距和字体样式生成 CSS 自定义属性（变量）。

🎨 CSS & Design
打印样式表生成器 - free online tool

打印样式表生成器

根据选项生成 @media 打印样式表，包括隐藏元素、设置文本样式和控制页面断点。

🎨 CSS & Design

Frequently Asked Questions

Q counter()和counters()有什么区别？
counter()显示单个计数器值。counters()显示带有分隔符字符串的嵌套计数器值。
Q 我可以在任何元素上使用CSS计数器吗？
是，CSS计数器可与任何元素一起工作，而不仅仅是<ol>或<li>元素。
Q 如何重置计数器？
在父元素上应用counter-reset。计数器从0开始（第一次递增使其成为1）。
Q 我可以从特定数字开始计数吗？
是，使用counter-reset：section 5从5开始（第一次显示将为6）。
Q CSS计数器是否可访问？
::before内容中的CSS计数器被大多数屏幕阅读器读取，但可能不一致。尽可能使用语义HTML列表。

About This Tool

CSS 计数器生成器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.