counter-reset


counter-reset 属性用于将 CSS计数器 重置为制定值

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

语法

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

语法形式

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

示例

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

规范

Specification Status Comment
CSS Lists Module Level 3
counter-reset
Working Draft No change.
CSS Level 2 (Revision 1)
counter-reset
Recommendation Initial definition.
初始值none
适用元素all elements
是否是继承属性
计算值as specified
Animation typediscrete

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
counter-resetChrome Full support 2Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 9.2Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 25Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参考