在 CSS 中，计数器充当用于编号目的的变量。它们可以通过 css 规则来增加或减少。Css 计数器使我们能够根据内容的位置修改内容的呈现方式。 例如，您可以使用计数器自动为段落、标题和列表分配编号。
CSS 计数器 - 嵌套计数器
我们可以使用 counters（） 函数以及 counter-reset 和 counter-increment 属性来创建带有嵌套计数器的大纲列表。 此技术允许您为不同级别的嵌套自动生成计数器。
以下示例使用 <ol> 元素创建一个嵌套结构，以演示计数器的嵌套。
<html>
<head>
<title>Nesting of Counter</title>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
</style>
</head>
<body>
<ol>
<li>Section 1
<ol>
<li>Subsection 1.1</li>
<li>Subsection 1.2</li>
<li>Subsection 1.3</li>
</ol>
</li>
<li>Section 2
<ol>
<li>Subsection 2.1</li>
<li>Subsection 2.2</li>
<li>Subsection 2.3</li>
</ol>
</li>
<li>Section 3
<ol>
<li>Subsection 3.1</li>
<li>Subsection 3.2</li>
<li>Subsection 3.3</li>
</ol>
</li>
</ol>
</body>
</html>
CSS 计数器 - 反向计数器
反向计数器是一种特殊的计数器，它向后计数而不是向前计数。要创建反向计数器，请在使用 counter-reset 设置它时使用 reversed（） 函数命名它。
反向计数器从默认初始值开始，该值等于元素数，而不是零。这意味着它可以简单地从元素数量倒计时到一个。
语法
counter-reset: reversed(counter name);
Reversed counter（反向计数器）属性仅受 Firefox 浏览器支持
以下示例演示了反向计数器（在 Firefox 浏览器中执行此示例）。
<html>
<head>
<style>
body {
counter-reset: reversed(
section);
}
p::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<p>This is fourth paragraph</p>
<p>This is Third paragraph</p>
<p>This is second paragraph</p>
<p>This is first paragraph</p>
</body>
</html>
计数器的名称不应为 none、inherit 或initial。如果是这种情况，则该声明被忽略。
CSS 计数器 - 相关属性
以下是计数器的 CSS 属性列表：
| 属性 | 值 |
|---|---|
| counter-reset | 它用于创建或重置计数器。 |
| counter-set | 它用于为给定值设置计数器。 |
| counter-increment | 它用于递增计数器值。 |
| counter() | 它提供了一个字符串，表示命名计数器的当前值。 |
| counters() | 它用于处理嵌套计数器。 |
| @counter-styles | 它用于创建自定义计数器样式。 |
| contain | 确定当元素的宽度太大而无法放入其容器中时，元素的内容如何表现。 |
