counter()函数用于css中实现自动编号，需配合counter-reset和counter-increment使用，常用于标题、列表等场景；其语法为counter(name, style)，支持decimal、lower-roman等样式，并可通过counters()实现嵌套编号如“1.2.3”，提升文档类页面的样式灵活性。
在CSS中，counter() 函数用于显示元素的计数器值，通常与 counter-reset 和 counter-increment 配合使用，实现自动编号功能。它常用于列表、章节标题、嵌套结构等需要动态编号的场景。
基本语法和用法
counter() 函数的基本语法如下：
counter(name) 或 counter(name, style)其中：
- name：计数器的名称，必须先通过 counter-reset 定义。
- style（可选）：指定计数器的样式，比如数字、字母或罗马数字，默认为十进制数字（decimal）。
常见应用场景
最典型的用法是在 content 属性中结合伪元素使用，例如为标题自动编号：
立即学习“前端免费学习笔记（深入）”；
企业后台管理系统JaManage2.0 多语言版
下载
功能介绍： 一.系统管理：管理员管理，可以新增管理员及修改管理员密码；数据库备份，为保证您的数据安全本系统采用了数据库备份功能；上传文件管理，管理你增加产品时上传的图片及其他文件 二.企业信息：可设置修改企业的各类信息及介绍 三.产品管理：产品类别新增修改管理，产品添加修改以及产品的审核 四.下载中心：可分类增加各种文件，如驱动和技术文档等文件的下载 五.订单管理：查看订单的详细信息
counter-increment: section;
content: "第" counter(section) "节 ";
}
这段代码会让每个 h2 元素前面显示“第1节”、“第2节”等编号。
支持的计数样式
counter() 的第二个参数可以设置多种样式：
- decimal：默认，阿拉伯数字（1, 2, 3…）
- lower-roman：小写罗马数字（i, ii, iii…）
- upper-roman：大写罗马数字（I, II, III…）
- lower-alpha：小写字母（a, b, c…）
- upper-alpha：大写字母（A, B, C…）
- 其他如 disc、circle 等不适用于 counter()，仅用于 list-style-type
嵌套计数器：counters()
对于多层嵌套结构（如章节下的小节），可以使用 counters() 函数：
h3::before {counter-increment: subsection;
content: counters(subsection, ".") ". ";
}
如果嵌套三层，会显示类似 “1.2.3.” 的编号格式，层级之间用指定分隔符连接。
基本上就这些。掌握 counter() 能让你在不修改HTML结构的前提下，灵活实现内容编号，特别适合文档类页面的样式控制。
