CSS 计数器(counter)

CSS计数器

CSS计数器是由CSS维护的“变量”，其值可以通过CSS规则递增（以跟踪它们的使用次数）。计数器允许您根据文档中的位置调整内容的外观。

带计数器的自动编号

CSS计数器就像“变量”。变量值可以通过CSS规则递增（它将跟踪它们被使用的次数）。要使用CSS计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器
counter-increment - 增加计数器值
content - 插入生成的内容
counter()或counters()函数 - 将计数器的值添加到元素

要使用CSS计数器，必须首先使用counter-reset创建。下面的示例为页面创建一个计数器（在body选择器中），然后递增每个<h2>元素的计数器值，并将“选项 < 计数器的值 >：”添加到每个<h2>元素的开头：

body {
             counter-reset: section;
           }

           h2::before {
             counter-increment: section;
             content: "选项 " counter(section) ": ";
           }

尝试一下

嵌套计数器

以下示例为页面（节）创建一个计数器，为每个<h1>元素（子节）创建一个计数器。对于每个<h1>元素，“section”计数器将计为“Section < 值的分区计数器 >。”，并且“subsection”计数器将计入每个<h2>元素，记入“<分区计数器的值 >==< 分段计数器的值 >“：

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) " ";
           }

尝试一下

计数器也可用于制作轮廓列表，因为在子元素中会自动创建计数器的新实例。这里我们使用counters()函数在不同级别的嵌套计数器之间插入一个字符串：

ol {
             counter-reset: section;
             list-style-type: none;
           }

           li::before {
             counter-increment: section;
             content: counters(section,".") " ";
           }

尝试一下

CSS计数器属性

属性	描述
content	与::before和::after伪元素一起使用，插入生成的内容
counter-increment	递增一个或多个计数器值
counter-reset	创建或重置一个或多个计数器

CSS计数器

带计数器的自动编号

嵌套计数器

CSS计数器属性

相关页面