前端必知必会-CSS计数器

---

CSS 计数器

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

使用计数器自动编号

CSS 计数器就像“变量”。变量值可以通过 CSS 规则增加（这将跟踪使用次数）。

要使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器
counter-increment - 增加计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
要使用 CSS 计数器，必须先使用 counter-reset 创建它。

以下示例为页面创建一个计数器（在 body 选择器中），然后为每个 <h2> 元素增加计数器值，并将“Section <计数器的值>:”添加到每个 <h2> 元素的开头：

示例

body {
counter-reset: section;
}

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

嵌套计数器

以下示例为页面（section）创建一个计数器，并为每个 <h1> 元素（subsection）创建一个计数器。“section”计数器将为每个带有“Section <节计数器的值>.”的 <h1> 元素计数，“subsection”计数器将为每个带有“<节计数器的值>.<子节计数器的值>”的 <h2> 元素计数：

示例

body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1::before {
counter-increment: section;
content: "Section " 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 创建或重置一个或多个计数器
counter() 返回指定计数器的当前值

---

总结

本文介绍了CSS计数器的使用，如有问题欢迎私信和评论