CSS参考手册
列表和计数器 | Lists & Counters
计数器复位 | counter-reset
counter-reset
重置一个CSS计数器值。计数器的值可以使用counter-increment
增加或减少。
/* 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>
在每次出现元素时重置计数器的值。如果未指定,则默认为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 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 |
列表和计数器 | Lists & Counters相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。