CSS teller-zet eigenschap

Definitie en gebruik

counter-set Eigenschap wordt gebruikt om een CSS teller te maken en te instellen op een specifieke waarde.

counter-set Eigenschappen worden meestal samen gebruikt met de counter-increment eigenschap en de content eigenschap.

Voorbeeld

Voorbeeld 1

Maak een teller ("mijn-teller") aan, stel deze in op 5 en verhoog deze bij elke vermelding van de <h2> selector met 1:

body {
  /* "mijn-teller" instellen op 5 */
  counter-set: mijn-teller 5;
}
h2::before {
  /* 将 "my-counter" 增加 1 */
  counter-increment: my-counter;
  content: "Sectie " counter(mijn-teller) ". ";
}

亲自试一试

Voorbeeld 2

Maak een teller ("mijn-teller") aan, stel deze in op 5 en verminder deze bij elke vermelding van de <h2> selector met 1:

body {
  /* "mijn-teller" instellen op 5 */
  counter-set: mijn-teller 5;
}
h2::before {
  /* "mijn-teller" verminderen met 1 */
  counter-increment: mijn-teller -1;
  content: "Sectie " counter(mijn-teller) ". ";
}

亲自试一试

Voorbeeld 3

Gebruik "Sectie 10:"、"10.1"、"10.2" en andere formaten voor hoofdstuk- en subhoofdstuknummers:

body {
  /* "sectie" instellen op 9 */
  counter-set: sectie 9;
}
h1 {
  /* 将 "subsection" 设置为 0 */
  counter-set: subsection 0;
}
h1::before {
  /* 将 "section" 增加 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* 将 "subsection" 增加 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

亲自试一试

例子 4

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

body {
  /* 将 "my-counter" 设置为 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* 将 "my-counter" 增加 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

亲自试一试

CSS 语法

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

属性值

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

相关页面

参考：::before 伪元素

参考：::after 伪元素

参考：CSS content eigenschap

参考：CSS teller-verhoog eigenschap

参考：CSS counter() functie