CSS计数器精讲：属性语法、嵌套用法与实战示例

在网页排版中，为章节、列表或步骤添加自动编号是常见需求。CSS计数器通过counter-reset、counter-increment与content属性配合，可在不依赖JavaScript的情况下实现纯CSS编号。掌握其初始化、自增、显示与嵌套规则，即可快速构建结构清晰的序号体系。

初始化计数器：counter-reset语法与参数

使用CSS计数器前，必须通过counter-reset属性创建并初始化计数器。该属性定义计数器的名称与起始值，语法如下：

counter-reset: none | [ ]

• none：阻止计数器复位
• ：计数器名称，用于后续引用
• ：起始值，默认为0，支持负数

初始化通常作用于父容器或文档根元素，确保计数器在子元素递增前已正确创建。

计数器自增：counter-increment控制递增逻辑

计数器创建后，需通过counter-increment指定何时递增。语法格式为：

counter-increment: none | [ ]

• none：阻止计数器增加
• ：需自增的计数器名称
• ：每次递增的步长，默认为1，支持负数

该属性通常绑定到需要触发计数的元素上，例如每个标题或列表项出现时自动加1。

显示计数器：counter与counters函数用法

计数器的值需通过content属性配合counter()或counters()函数输出到页面。函数语法如下：

counter(name)
counters(name, string, list-style-type)

• name：计数器名称
• string：嵌套层级间的拼接字符串
• list-style-type：编号样式，取值与list-style-type属性一致

以下示例演示如何为章节与子章节生成自动编号：

      
程序设计语言
 
HTML and CSS
 
JavaScript
 
PHP
 
Java
 
数据库管理系统
 
MySQL
 
MariaDB
 
PostgreSQL
 
Oracle
  
注意：在使用CSS计数器前，必须通过counter-reset创建计数器，否则counter-increment与counter()将无法生效。
计数器嵌套：多层级编号与字符串拼接
当需要生成多级列表编号时，可使用counters()函数自动拼接各层级计数器的值，并在层级间插入指定分隔符。示例如下：
      
 
item
 
item 
 
item
 
item
 
item 
 
item
 
item
 
 
 
item 
 
item
 
item
 
item
 
 
 
 
 
item
 
item
 
  
通过合理组合counter-reset、counter-increment与counters()，可在不引入JavaScript的前提下实现目录生成、步骤指示器、多级列表编号等场景，提升页面结构的语义化与可维护性。