counter-reset

概要

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

初始值none
适用元素all elements
是否是继承属性
适用媒体all
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 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;

可选值

<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.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (?) 8.0 9.2 3.1 (?)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 25.0 (?) 10 (?) 10.0 3.2

参考