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

目录

CSS counter-set 属性

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

示例

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

body {
  /* Set "my-counter" to 5 */
  counter-set: my-counter 5;
}

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

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

定义和用法

这个counter-set属性创建 CSS 计数器并将其设置为特定值。

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

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

浏览器支持

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

Property
counter-set 85.0 85.0 68.0 Not supported 71.0

CSS 语法

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

属性值

Value Description
none Default value. No counter set is to be performed
counter-name number The name of the counter to set and the value to set the counter 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-counter")，将其设置为 5，并在每次出现 <h2> 选择器时将其减一：

body {
  /* Set "my-counter" to 5 */
  counter-set: my-counter 5;
}

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

示例

使用 "Section 10:"、"10.1"、"10.2" 等对节和子节进行编号：

body {
   /* Set "section" to 9 */
  counter-set: section 9;
}

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

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) " ";
} 
亲自试一试 »

示例

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

body {
  /* Set "my-counter" to 9 */
  counter-set: my-counter 9;
}

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

相关页面

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

CSS 参考：::伪元素之后

CSS 参考：内容属性

CSS 参考：反增属性

CSS 函数：counter() 函数


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