请解释 counter-increment 和 counter-reset 属性的作用，并说明如何使用它们实现计数器。

推荐答案

counter-increment 和 counter-reset 是 CSS 中用于创建和操作计数器的属性。

• counter-increment: 用于增加计数器的值。它需要一个计数器名称和一个可选的增量值（默认为 1）。每次元素被渲染时，指定的计数器的值都会增加。
• counter-reset: 用于重置计数器的值。它需要一个计数器名称和一个可选的起始值（默认为 0）。通常在计数器作用域的起始元素上设置，以确保每次计数器开始时都从正确的值开始。

使用它们实现计数器的一般步骤是：

1. 使用 counter-reset 定义并初始化计数器。
2. 使用 counter-increment 在需要增加计数的元素上增加计数器的值。
3. 使用 counter() 函数在 ::before 或 ::after 伪元素中显示计数器的值。

例如：

// www.javascriptcn.com code example
.container {
  counter-reset: my-counter; /* 初始化计数器 "my-counter" 为 0 */
}

.item {
  counter-increment: my-counter; /* 每次渲染 .item 时，my-counter 值加 1 */
}

.item::before {
  content: "Item " counter(my-counter) ": "; /* 在 .item 前显示计数器值 */
}

本题详细解读

counter-increment 属性

counter-increment 属性用于在每次元素被渲染时，增加指定的 CSS 计数器的值。其语法为：

counter-increment: <counter-name> [<integer>] | none | inherit;

• <counter-name>：必需，定义要递增的计数器名称，区分大小写。
• [<integer>]：可选，指定递增的值，默认为 1。可以是正数、负数或 0。负数会导致计数器递减。
• none： 表示不增加计数器。
• inherit：表示继承父元素的 counter-increment 值。

示例：

// www.javascriptcn.com code example
/* 计数器 my-counter 每次递增 2 */
.item {
  counter-increment: my-counter 2;
}

/* 计数器 my-counter 每次递减 1 */
.item {
  counter-increment: my-counter -1;
}

counter-reset 属性

counter-reset 属性用于创建新的计数器，并将计数器的值重置为指定的初始值。其语法为：

counter-reset: <counter-name> [<integer>] | none | inherit;

• <counter-name>：必需，定义要创建并重置的计数器名称。
• [<integer>]：可选，指定计数器的起始值，默认为 0。
• none：表示不重置计数器。
• inherit：表示继承父元素的 counter-reset 值。

示例：

// www.javascriptcn.com code example
/* 创建计数器 my-counter，初始值为 0 */
.container {
    counter-reset: my-counter;
}

/* 创建计数器 my-counter，初始值为 5 */
.container {
  counter-reset: my-counter 5;
}

如何使用 counter() 函数显示计数器

counter() 函数用于在 content 属性中使用，显示指定计数器的当前值。它有两种语法：

• counter(name): 显示计数器的值，使用默认的十进制表示。
• counter(name, style): 显示计数器的值，使用指定的样式表示。

style 可以是以下值： * decimal (默认): 十进制数 (1, 2, 3, ...) * decimal-leading-zero: 以 0 开头的十进制数 (01, 02, 03, ...) * lower-roman: 小写罗马数字 (i, ii, iii, iv, ...) * upper-roman: 大写罗马数字 (I, II, III, IV, ...) * lower-alpha / lower-latin: 小写字母 (a, b, c, ...) * upper-alpha / upper-latin: 大写字母 (A, B, C, ...) * hebrew: 传统的希伯来数字 * armenian: 传统的亚美尼亚数字 * georgian: 传统的格鲁吉亚数字 * cjk-decimal: 中日韩十进制数 * 等其他 list-style-type 的值。

例如：

/* 使用默认十进制显示 */
.item::before {
  content: counter(my-counter);
}
/* 使用小写字母显示 */
.item::before {
    content: counter(my-counter, lower-alpha);
}

计数器作用域

计数器具有作用域，它由设置了 counter-reset 属性的元素定义。子元素可以访问并递增父元素的计数器，但父元素不能访问子元素创建的计数器。这使得计数器可以用于创建嵌套列表或章节编号等复杂的计数场景。

示例

以下是一个更完整的示例，演示如何使用计数器创建简单的有序列表：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

// www.javascriptcn.com code example
.container {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
}

.item::before {
  content: "Item " counter(item-counter) ": ";
}

在这个示例中，container 元素定义了计数器 item-counter，并将其初始化为 0。每个 item 元素将计数器递增 1，并在其前面显示计数器的当前值。