码农教程 - 一技在手,衣食无忧! tools

目录

CSS counter-increment 属性

❮上一节 完整的CSS参考 下一节❯

示例

创建一个计数器 ("my-sec-counter") 并在每次出现 <h2> 选择器时将其加一：

body {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

h2::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
} 
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个counter-increment属性会增加或减少一个或多个 CSS 计数器的值。

这个counter-increment属性通常与计数器复位属性和内容属性。

默认值： 没有任何
遗传： 不
可动画： 不。阅读可动画的
版本： CSS2
JavaScript 语法： 对象.style.counterIncrement = "subsection";尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
counter-increment 4.0 8.0 2.0 3.1 9.6

CSS 语法

counter-increment: none| id|initial|inherit;

属性值

Value Description
none Default value. No counters will be incremented
id number The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

创建一个计数器 ("my-sec-counter") 并在每次出现 <h2> 选择器时将其减一：

body {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

h2::before {
  /* Decrement "my-sec-counter" by 1 */
  counter-increment: my-sec-counter -1;
  content: "Section " counter(my-sec-counter) ". ";
} 
亲自试一试 »

示例

使用 "Section 1:"、"1.1"、"1.2" 等对节和子节进行编号：

body {
   /* Set "section" to 0 */
  counter-reset: section;
}

h1 {
   /* Set "subsection" to 0 */
  counter-reset: subsection;
}

h1::before {
  /* Increment "section" by 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

h2::before {
  /* Increment "subsection" by 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
} 
亲自试一试 »

示例

创建一个计数器，并为每次出现的 <h2> 选择器将其加一（使用罗马数字）：

body {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

h2::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: counter(my-sec-counter, upper-roman) ". ";
}
亲自试一试 »

相关页面

CSS 参考：::在伪元素之前

CSS 参考：::伪元素之后

CSS 参考：内容属性

CSS 参考：计数器重置属性

CSS 函数：counter() 函数

HTML DOM 参考：counterIncrement 属性


❮上一节 完整的CSS参考 下一节❯