counter-reset

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

counter-reset CSS 属性用于创建具名 CSS 计数器,并将其初始化为指定值。它支持创建从 1 向上计数到元素数量的计数器,以及从元素数量向下计数到 1 的计数器。

尝试一下

备注: 计数器的值能够通过 CSS 属性 counter-increment 控制递增或递减。

语法

css
/* Set counter-name to 0 */
counter-reset: counter-name;

/* Set counter-name to -1 */
counter-reset: counter-name -1;

/* Set counter1 to 1, and counter2 to 4 */
counter-reset: counter1 1 counter2 4;

/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;

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

counter-reset 属性可以指定为以下之一:

  • <自定义 ID> [<数值>]。你可以指定任意数量的计数器进行重置,每个名称或“名称 - 数字”对之间用空格分隔。
  • 特殊值 none

可选值

<custom-ident>

要递增的计数器的名称。

备注: 该名称由不区分大小写的字母 a 到 z,数字 0 到 9,下划线(_)和 / 或短划线( - )的组合组成,并且第一个非破折号字符必须是一个字母(即,在它的开头没有数字,即使前面有破折号)。此外,在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none,unset,initial 或 inherit。

<integer>

每次出现元素时将计数器重置为的值。如果不指定,则默认为 0

none

该关键字表示不执行计数器重置。它可用于重置隐藏在不太具体的规则中定义的计数器。你可以指定要根据需要重置的计数器,每个计数器用空格分隔。

语法形式

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

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

示例

css
h1 {
  counter-reset: chapter section 1 page;
  /* Sets the chapter and page counters to 0
     and the section counter to 1. */
}

规范

Specification
CSS Lists and Counters Module Level 3
# counter-reset
初始值none
适用元素所有元素
是否是继承属性
计算值as specified
动画类型按计算值的类型

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counter-reset
list-item
none
Resets counter on current element (not sibling elements).
Experimental
reversed()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.

参考