counter-increment
CSS
property increases or decreases the value of a
CSS counter
by a given value.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
注意：
The counter's value can be reset to an arbitrary number using the
counter-reset
CSS property.
/* Increment "my-counter" by 1 */ counter-increment: my-counter; /* Decrement "my-counter" by 1 */ counter-increment: my-counter -1; /* Increment "counter1" by 1, and decrement "counter2" by 4 */ counter-increment: counter1 counter2 -4; /* Do not increment/decrement anything: used to override less specific rules */ counter-increment: none; /* Global values */ counter-increment: inherit; counter-increment: initial; counter-increment: unset;
counter-increment
property is specified as either one of the following:
<custom-ident>
naming the counter, followed optionally by an
<integer>
. You may specify as many counters to increment as you want, with each name or name-number pair separated by a space.
none
.
<custom-ident>
The name of the counter to increment.
<integer>
1
if not specified.
none
No counter must be incremented. This is used as the default value, or to cancel an increment in more specific rules.
| 初始值 |
none
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
[ <custom-ident> <integer>? ]+ | none
h1 {
counter-increment: chapter section 2 page;
/* Increases the value of the chapter and page counters by 1,
and the section counter by 2 */
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Lists Module Level 3
The definition of 'counter-increment' in that specification. |
工作草案 | 无变化。 |
|
CSS Level 2 (Revision 1)
The definition of 'counter-increment' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
counter-increment
|
Chrome 完整支持 2 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 8 | Opera 完整支持 9.2 | Safari 完整支持 3 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 25 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
<custom-ident>
counter-increment
counter-reset
counter-set