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

目录

CSS counter-reset 属性

❮上一节 完整的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-reset属性创建或重置一个或多个 CSS 计数器。

这个counter-reset属性通常与反增量属性和内容属性。

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

浏览器支持

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

Property
counter-reset 4.0 8.0 2.0 3.1 9.6

CSS 语法

counter-reset: none| name number|initial|inherit;

属性值

Value Description
none Default value. No counters will be reset
id number The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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 参考：计数器重置属性


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