计数器设置 | CSS-Tricks

counter-set CSS 属性顾名思义，用于设置 CSS 计数器的起始值。您知道有序列表从 1 开始，然后依次递增吗？counter-set 属性允许我们将此起始值设置为其他值，例如 -1。或者 2。或者 200！只不过它应用于CSS 计数器而不是有序列表。

因此，假设我们有一个用于书籍章节列表的自定义计数器，其中章节号位于章节名称之前。

我们将首先使用counter-reset 属性定义一个计数器。我们将它命名为chapter，并在章节的父容器类（创造性地命名为.chapters）上定义它。

.chapters {
  counter-reset: chapter;
}

接下来，我们将使用counter-increment 属性将chapter 计数器分配给某个元素。由于这些是书籍章节，因此我们将它们应用于<h2> 元素，假设书籍标题将是<h1>。请注意，我们实际上是将其分配给:before 伪元素，因为它允许我们将计数器放在实际的<h2> 元素之前。

h2:before {
  counter-increment: chapter;
}

不错，最后我们需要告诉计数器应该显示什么。这可以通过counter() 函数在content 属性上完成。我们还会给计数器添加一点颜色，因为设计需要它。

h2:before {
  color: red;
  content: "Chapter " counter(chapter) ": ";
  counter-increment: chapter;
}

嘿，看起来不错！

但是等等！我并不喜欢从章节 1 开始的事实。我的意思是，“前言”并不是真正的章节。如果非要说的话，它更像是章节 0。

这就是counter-set 的用武之地！让我们将其设置为从零开始。

h2:first-of-type::before {
  counter-set: chapter;
}

就是这样！这样好多了。只需将属性值设置为计数器的名称，我们就将章节列表设置为从章节 0 开始。我们也可以轻松地将其设置为从其他章节开始，例如章节 100。

如果浏览器不支持counter-set 会怎样？实际上没什么。它将被简单地忽略，列表将从其默认值1 开始。

语法

[ <custom-ident> <integer>? ]+ | none

这基本上是一种花哨的说法，表示该属性接受自定义计数器的名称（<custom-ident>）和起始值（<integer>）。或者将其设置为none，编号将从默认起始点1 开始。

初始值：none
应用于：所有元素（包括非视觉元素）
继承：否
动画类型：按计算值类型

值

/* Set "awesome-counter" to 0 */
counter-set: awesome-counter;

/* Set "awesome-counter" to -10 */
counter-set: awesome-counter -10;

/* Set "awesome1" to 0, and "awesome2" to 2 */
counter-set: awesome1 awesome2 2;

/* Wipe out any other settings that may have been declared elsewhere */
counter-set: none;

/* Global values */
counter-set: inherit;
counter-set: initial;
counter-set: unset;

请注意，如果在其他地方尚未定义其上声明的计数器名称，则counter-set 将创建一个新的计数器。