Sifat counter-set CSS

halaman sebelumnya counter-reset
halaman berikutnya @counter-style

定义和用法

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

counter-set 属性通常与 counter-increment 属性和 content 属性一起使用。

实例

例子 1

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

body {
  /* 将 "my-counter" 设置为 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Tambahkan "my-counter" 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

cobalah sendiri

例子 2

创建一个计数器（"my-counter"），将其设置为 5，并在每次出现 <h2> 选择器时将其减少 1：

body {
  /* 将 "my-counter" 设置为 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* 将 "my-counter" 减少 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

cobalah sendiri

例子 3

使用 "Section 10:"、"10.1"、"10.2" 等格式为章节和子章节编号：

body {
  /* 将 "section" 设置为 9 */
  counter-set: section 9;
}
h1 {}}
  /* Atur "subsection" ke 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Tambahkan "section" 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Tambahkan "subsection" 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

cobalah sendiri

contoh 4

buat pemosisi, aturnya ke 9, dan tinggalkan penambahan 1 setiap kali terjadi pemilihan <h2> (dengan huruf Romawi):

body {
  /* Atur "my-counter" ke 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Tambahkan "my-counter" 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

cobalah sendiri

syntax CSS

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

nilai atribut

nilai	deskripsi
none	nilai baku. Jangan atur pemosisi.
counter-name number	nama pemosisi yang akan diatur dan nilai nya. setiap kali terjadi pemilihan pemosisi, pemosisi penjumlahan akan diatur ke nilai ini. nilai numerik baku adalah 0.
initial	atur atribut ini ke nilai baku. Lihat initial。
inherit	minta untuk mengambil atribut ini dari elemen induknya. Lihat inherit。

nilai baku:	none
kekhianatan:	tidak
pembuatan animasi：	tidak didukung. Lihat:atribut berhubungan dengan animasi。
Versi：	CSS2
Syntax JavaScript：	object.style.counterSet="4"