理解 CSS 计数器的基本概念及其作为“变量”的工作原理
掌握 counter-reset、counter-increment 和 content 属性的使用方法
学会使用 counter()和 counters() 函数实现单层和多层级编号
能够应用 CSS 计数器创建自动编号的章节标题和大纲列表
了解如何通过嵌套计数器实现复杂的文档结构编号
CSS 计数器是一种特殊的 "变量"，由浏览器维护，可用于自动为元素（如列表项或章节）编号。这些计数器的值可以通过 CSS 规则进行递增，从而跟踪元素的使用次数。与传统的 HTML 列表编号不同，CSS 计数器提供了更灵活的编号控制方式，允许开发者完全自定义编号样式和逻辑。
CSS 计数器主要依赖以下四个核心属性与函数：
counter-reset：创建新计数器或将现有计数器重置为指定值
counter-increment：增加计数器的当前值
content：在元素前后插入生成内容（如计数器的当前值）
counter()和 counters() 函数：返回单个计数器的值或多层级计数器的组合值
CSS 计数器最基础的应用是为文档中的章节标题自动添加编号。通过设置计数器并在每个标题元素前显示其当前值，可以轻松实现类似 "第 1 章"、"第 2 章" 这样的自动编号效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 计数器基础示例</title>
<style>
body {
counter-reset: section; /* 在 body 元素上初始化 section 计数器 */
}
h2::before {
counter-increment: section; /* 每个 h2 元素使计数器加 1 */
content: "第 " counter(section) " 节："; /* 在 h2 前显示计数器值 */
}
</style>
</head>
<body>
<h2>披萨</h2>
<h2>汉堡</h2>
<h2>热狗</h2>
</body>
</html>counter-reset: section; 在 body 元素上初始化名为 "section" 的计数器，默认起始值为 0
counter-increment: section; 每当遇到 h2 元素时，section 计数器自动加 1
content: "第 " counter(section) " 节："; 使用 counter() 函数获取当前计数值，并与其他文本组合显示
渲染结果将显示为：
第 1 节：披萨
第 2 节：汉堡
第 3 节：热狗
在复杂文档中，常常需要实现多级编号系统，例如 "第 1 章 1.1 节"、"第 1 章 1.2 节"、"第 2 章 2.1 节" 等。CSS 计数器支持创建多个独立运行的计数器，通过合理重置和递增，可以实现这种层次化编号。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 嵌套计数器示例</title>
<style>
body {
counter-reset: section; /* 初始化主章节计数器 */
}
h1 {
counter-reset: subsection; /* 每个新章节开始时重置子节计数器 */
}
h1::before {
counter-increment: section; /* 主章节计数器递增 */
content: "第 " counter(section) " 章";
}
h2::before {
counter-increment: subsection; /* 子节计数器递增 */
content: counter(section) "." counter(subsection) " "; /* 组合显示两级编号 */
}
</style>
</head>
<body>
<h1>披萨</h1>
<h2>芝士口味</h2>
<h2>番茄口味</h2>
<h1>汉堡</h1>
<h2>牛肉堡</h2>
<h2>鸡肉堡</h2>
<h1>热狗</h1>
<h2>经典款</h2>
<h2>香辣款</h2>
</body>
</html>每当遇到新的 h1 元素（新章节），subsection 计数器会被重置为 0
section 计数器在每个 h1 处递增，表示主章节号
subsection 计数器在每个 h2 处递增，表示当前章节内的小节号
通过 counter(section) "." counter(subsection) 组合两个计数器的值，形成层次化编号
对于具有嵌套结构的有序列表，CSS 计数器配合 counters() 函数可以自动生成符合层级关系的编号，如 "1"、"1.1"、"1.2"、"2"、"2.1" 等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 大纲列表示例</title>
<style>
ol {
counter-reset: item; /* 每个有序列表初始化 item 计数器 */
list-style-type: none; /* 移除默认列表样式 */
}
li {
display: block;
}
li::before {
counter-increment: item; /* 每个列表项使计数器加 1 */
content: counters(item, ".") " "; /* 使用 counters 函数显示完整路径 */
}
/* 为嵌套列表添加缩进 */
li ol {
margin-left: 20px;
}
</style>
</head>
<body>
<ol>
<li>披萨</li>
<li>汉堡
<ol>
<li>牛肉堡</li>
<li>鸡肉堡</li>
</ol>
</li>
<li>热狗</li>
</ol>
</body>
</html>counters() 函数是处理多层级编号的关键，它接受两个参数：
计数器名称
分隔符字符串（可选，默认为空）
该函数会遍历所有同名的祖先计数器，并用指定的分隔符连接它们的值。在上述示例中：
顶级列表项显示为 "1"、"2"、"3"
嵌套在第二个列表项下的子项显示为 "2.1"、"2.2"
可以通过在 counter-reset 属性中指定数值来设置计数器的起始值：
/* 将 section 计数器初始化为 5 */
body {
counter-reset: section 5;
}counter-increment 也支持指定递增的步长：
/* 每次递增 2 */
h2 {
counter-increment: section 2;
}计数器也可以递减：
/* 每次递减 1 */
h2 {
counter-increment: section -1;
}可以在同一规则中操作多个计数器：
h2 {
counter-increment: section 1 subsection 2;
}现代主流浏览器（Chrome、Firefox、Safari、Edge）均良好支持 CSS 计数器功能。但在极旧版本的 IE 浏览器中可能存在兼容性问题，生产环境中需根据目标用户群体进行评估。
CSS 计数器是浏览器维护的特殊 "变量"，用于自动编号元素
核心属性包括 counter-reset（初始化 / 重置）、counter-increment（递增）和 content（插入内容）
counter()函数用于获取单个计数器的值，counters() 函数用于获取多层级计数器的组合值
通过合理重置和递增，可以实现单层、双层甚至多层级的复杂编号系统
计数器特别适用于章节标题编号、大纲列表、法律条文编号等场景
支持自定义起始值、递增步长，甚至可以递减计数
与现代浏览器兼容性良好，是实现动态编号的纯 CSS 解决方案
如果需要创建一个三级编号系统（如 1.1.1、1.1.2、1.2.1 等），应该如何设计 CSS 计数器规则？请描述需要定义哪些计数器以及在什么元素上进行重置和递增操作。
在某些文档中，附录部分需要从 "A"、"B"、"C" 开始编号，而不是数字。如何利用 CSS 计数器结合 CSS 的 list-style-type 或其他属性实现字母编号？请提出可能的实现思路。
假设有一个文档，要求奇数章节使用阿拉伯数字编号（1、2、3），偶数章节使用罗马数字编号（Ⅰ、Ⅱ、Ⅲ）。仅使用 CSS 计数器能否实现这种交替编号效果？如果不能，需要结合什么技术？如果能，请简述实现方法。