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
是否是继承属性
适用媒体all
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

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

参考