首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

计数器复位 | counter-reset

counter-reset 重置一个CSS计数器值。计数器的值可以使用counter-increment增加或减少。

代码语言:javascript
复制
/* Set "my-counter" to 0 */
counter-reset: my-counter;

/* Set "my-counter" to -1 */
counter-reset: my-counter -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;

初始值

none

应用于

all elements

是否继承

no

媒体

all

计算值

as specified

Animation type

discrete

规范顺序

the unique non-ambiguous order defined by the formal grammar

句法

counter-reset属性指定为下列任一项:

  • <custom-ident>命名计数器,随后可选择一个<integer>。您可以指定任意数量的计数器,以便根据需要进行重置,每个名称或名称编号对之间用空格分隔。
  • 关键字值none.

取值

<custom-ident>要重置的计数器的名称。

<integer>在每次出现元素时重置计数器的值。如果未指定,则默认为0none不执行计数器复位。

形式语法

代码语言:javascript
复制
[ <custom-ident> <integer>? ]+ | none

实例

代码语言:javascript
复制
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 and Counters Module Level 3The definition of 'counter-reset' in that specification.

Working Draft

No change.

CSS Level 2 (Revision 1)The definition of 'counter-reset' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

2.0

(Yes)

1.01

8.0

9.2

3.11

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

2.1

(Yes)

25.01

101

10.0

3.2

扫码关注腾讯云开发者

领取腾讯云代金券