反增 | counter-increment
counter-increment
counter-increment 属性按给定的数量增加或减少css 计数器的值。计数器的值可以使用计数器重置 CSS 属性重置为任意数字。
/* 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;
| 初始化 | none |
|---|---|
| 应用于 | all elements |
| 是否继承 | no |
| 使用媒体 | all |
| 计算值 | as specified |
| Animation type | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
句法
counter-increment属性指定为下列任一项：
- 一个<custom-ident>命名计数器，随后可选择一个<integer>。您可以指定任意数量的计数器，只要您想要增加，每个名称或名称编号对之间用空格分隔。
- 关键字值
none
取值
<custom-ident>要增量的计数器的名称。
形式语法
[ <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 */
}
规格
| Specification | Status | Comment |
|---|---|---|
| CSS Lists and Counters Module Level 3The definition of 'counter-increment' in that specification. | Working Draft | No change. |
| CSS Level 2 (Revision 1)The definition of 'counter-increment' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 2.0 | (Yes) | 1.0 | 8.0 | 9.2 | (Yes)1 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? | ? |
