ຄັນສັບສາມການສະແດງcounter-set CSS

定义和用法

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 {
  /* ຈະຕັດສິນລະບາຍ "my-counter" ຕັດສິນລະບາຍ 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

ການສະແດງດີຕະຫຼອດເອງ

例子 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) ". ";
}

ການສະແດງດີຕະຫຼອດເອງ

例子 3

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

body {
  /* 将 "section" 设置为 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, ແລະ ພຽງແຕ່ບ່ອນທີ່ຄົນໄດ້ເລືອກ <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 ເປັນສິ່ງປອມ

ອີງຕາມ:ຄັນສັບສາມການສະແດງcontent CSS

ອີງຕາມ:ຄັນສັບສາມການສະແດງcounter-increment CSS

ອີງຕາມ:ບັນດາຄະຕິນ CSS counter()