Mwongozo wa CSS counter-set

Ufafanuzi na matumizi

counter-set Inatumiwa kumueleza na kumuingiza kinalesha cha CSS kwa thamani ya kinalesha:

counter-set Mafanikio inatumiwa kwa pamoja na mafanikio ya counter-increment na content.

Mfano

Mfano 1

Kumueleza kinalesha ("my-counter"), kuingiza kwa 5, na kumachagua kila mara <h2> mshahara:

body {
  /* Kuingiza "my-counter" kwa 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* 将 "my-counter" 增加 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

亲自试一试

Mfano 2

Kumueleza kinalesha ("my-counter"), kuingiza kwa 5, na kumachagua kila mara <h2> mshahara:

body {
  /* Kuingiza "my-counter" kwa 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Kuingiza "my-counter" kwa 1 kama chaguo */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

亲自试一试

Mfano 3

Tumia fomu "Section 10:"、"10.1"、"10.2" na vitengo vingine kwa kumaliza namba ya kitabu na kichwani:

body {
  /* Kuingiza "section" kwa 9 */
  counter-set: section 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，并在每次出现

选择器时将其增加 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;

属性值

浏览器支持

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

Vizi vya habari

Mifano:::before mikoneno fupi

Mifano:::after mikoneno fupi

Mifano:Mwongozo wa CSS content

Mifano:Mwongozo wa CSS counter-increment

Mifano:Funksheni ya counter() ya CSS