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>

反转计数器

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

反向计数器以等于元素数量（而不是零）的默认初始值开始。这意味着它可以简单地从元素数量倒数到 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、inherit或initial。如果是这种情况，则该声明将被忽略。

CSS 计数器 - 相关属性

以下是 counter 的 CSS 属性列表：

财产	价值
计数器复位	它用于创建或重置计数器。
反设定	它用于将计数器设置为给定值。
反增量	它用于增加计数器值。
柜台（）	它提供了一个表示指定计数器当前值的字符串。
计数器()	它用于与嵌套计数器一起使用。
@counter-styles	它用于创建自定义计数器样式。
包含	确定当元素太宽而无法放入其容器时，元素内容的Behave方式。