counter-reset

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

counter-reset CSS 属性用于创建命名的 CSS 计数器并将其初始化为特定值。它支持创建从 1 递增到元素数量的计数器，以及从元素数量递减到 1 的计数器。

试一试

counter-reset: none;

counter-reset: chapter-count 0;

counter-reset: chapter-count;

counter-reset: chapter-count 5;

counter-reset: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-reset: chapter-count;
}

#example-element {
  background-color: lightblue;
  color: black;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counters(chapter-count, ".") ": ";
}

语法

css

/* Create a counter with initial default value 0 */
counter-reset: my-counter;

/* Create a counter and initialize as "-3" */
counter-reset: my-counter -3;

/* Create a reversed counter with initial default value */
counter-reset: reversed(my-counter);

/* Create a reversed counter and initialize as "-1" */
counter-reset: reversed(my-counter) -1;

/* Create reversed and regular counters at the same time */
counter-reset: reversed(pages) 10 items 1 reversed(sections) 4;

/* Remove all counter-reset declarations in less specific rules */
counter-reset: none;

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: revert;
counter-reset: revert-layer;
counter-reset: unset;

counter-reset 属性接受一个或多个空格分隔的计数器名称列表，或关键字 none。对于计数器名称，常规计数器使用格式 <counter-name>，反向计数器使用 reversed(<counter-name>)，其中 <counter-name> 是 <custom-ident> 或内置 <ol> 计数器的 list-item。可选地，每个计数器名称后面可以跟一个 <integer> 来设置其初始值。

<custom-ident>: 指定要使用 <custom-ident> 格式创建和初始化的计数器名称。可以使用 reversed() 函数式表示法来标记计数器为反向。
<integer>: 为新创建的计数器设置的初始值。如果未指定，默认为 0。
none: 指定不应发生任何计数器初始化。此值对于在不那么具体的规则中覆盖 counter-reset 值很有用。

描述

counter-reset 属性可以创建常规计数器，并且在支持的浏览器中，还可以创建反向计数器。您可以创建多个常规和反向计数器，每个计数器之间用空格分隔。计数器可以是独立的名称，也可以是空格分隔的名称-值对。

警告： counter-reset 和 counter-set 属性之间存在差异。在使用 counter-reset 创建计数器后，您可以使用 counter-set 属性调整其值。这有点违反直觉，因为尽管其名称如此，counter-reset 属性用于创建和初始化计数器，而 counter-set 属性用于重置现有计数器的值。

在具有更高特异性的选择器上设置 counter-increment: none 会覆盖在具有较低特异性的选择器上设置的命名计数器的创建。

默认初始值

常规计数器和反向计数器的默认初始值使其易于实现两种最常见的编号模式：分别从一递增到元素数量和从元素数量递减到一。通过为命名计数器包含一个计数器值，您的计数器可以从一个整数值开始递增或递减。

如果未提供重置值，常规计数器默认为 0。默认情况下，常规计数器递增一，这可以通过 counter-increment 属性进行调整。

css

h1 {
  /* Create the counters "chapter" and "page" and set to initial default value.
     Create the counter "section" and set to "4". */
  counter-reset: chapter section 4 page;
}

反向计数器

在没有值的情况下创建反向计数器时，计数器将以等于集合中元素数量的值开始，向下计数，以便集合中的最后一个元素为 1。默认情况下，反向计数器递减一；这也可以通过 counter-increment 属性更改。

css

h1 {
  /* Create reversed counters "chapter" and "section".
      Set "chapter" as the number of elements and "section" as "10".
      Create the counter "pages" with the initial default value. */
  counter-reset: reversed(chapter) reversed(section) 10 pages;
}

内置 `list-item` 计数器

有序列表（<ol>）带有内置的 list-item 计数器，控制其编号。这些计数器会随着每个列表项自动递增或递减一。counter-reset 属性可用于重置 list-item 计数器。与其它计数器一样，您可以使用 counter-increment 属性覆盖 list-item 计数器的默认增量值。

正式定义

初始值	`none`
应用于	所有元素
继承性	否
计算值	同指定值
动画类型	按计算值类型

正式语法

counter-reset = 
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |
  none                                                

<reversed-counter-name> = 
  reversed( <counter-name> )

示例

覆盖 `list-item` 计数器

在此示例中，counter-reset 属性用于为隐式 list-item 计数器设置起始值。

HTML

html

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ol>

CSS

使用 counter-reset，我们将隐式 list-item 计数器设置为从除默认值 1 之外的值开始计数

css

ol {
  counter-reset: list-item 3;
}

结果

使用 counter-reset，我们为每个 ol 将隐式 list-item 计数器设置为从 3 开始计数。然后，第一个项目将编号为 4，第二个项目将编号为 5，等等，类似于在 HTML 中编写 <ol start="4"> 的效果。

使用反向计数器

在以下示例中，我们声明了一个名为“priority”的反向计数器。该计数器用于为五个任务编号。

html

<ul class="stack">
  <li>Task A</li>
  <li>Task B</li>
  <li>Task C</li>
  <li>Task D</li>
  <li>Task E</li>
</ul>

@supports not (counter-reset: reversed(priority)) {
  .stack {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support the reversed counters yet.";
  }
}

css

li::before {
  content: counter(priority) ". ";
  counter-increment: priority -1;
}

.stack {
  counter-reset: reversed(priority);
  list-style: none;
}

在输出中，项目按从 5 到 1 的反向顺序编号。请注意，在代码中我们没有指定计数器的初始值。浏览器会在布局时使用计数器增量值自动计算初始值。

规范

规范
CSS 列表与计数器模块第 3 级 # counter-reset

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题