在 CSS 中，计数器充当用于编号目的的变量。它们可以通过 CSS 规则增加或减少。 CSS 计数器使我们能够根据内容的位置修改内容的呈现方式。例如，您可以使用计数器自动为段落、标题和列表分配数字。

CSS 计数器: 嵌套计数器

我们可以将 counters() 函数与 counter-reset和counter-increment属性以创建带有嵌套计数器的轮廓列表。该技术允许您自动生成不同级别嵌套的计数器。

以下示例使用 <ol> 元素创建一个嵌套结构，以演示计数器的嵌套。

<html>
<head>
  <title>嵌套计数器</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 计数器: 反转计数器

反转计数器是一种特殊的计数器，可以向后计数而不是向前计数。要创建反向计数器，请在使用计数器重置进行设置时使用reverse()函数对其进行命名。

反向计数器以等于元素数量（而不是零）的默认初始值开始。这意味着它可以简单地从元素数倒数到 1。

语法

counter-reset: reversed(counter name);
仅 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，继承或初始。如果是这种情况，则忽略该声明。

CSS 计数器 - 相关属性

以下是计数器的 CSS 属性列表:

属性值
counter-reset它用于创建或重置计数器。
counter-set它用于将计数器设置为给定值。
counter-increment用于增加计数器值。
counter()它提供了一个字符串，表示命名计数器的当前值。
counters()它用于使用嵌套计数器。
@counter-styles 用于创建自定义计数器样式。
contain确定当元素太宽而无法放入其容器时其内容的行为方式。