CSS ตั้งต้นตัวนับ

การเขียนและการใช้งาน

counter-set คุณสมบัติใช้เพื่อสร้างและกำหนดค่าตัวนับ CSS ให้เป็นค่าเฉพาะที่กำหนด:

counter-set รายการคุณสมบัติมักถูกใช้ร่วมกับคุณสมบัติ counter-increment และ content ร่วมกัน:

ตัวอย่าง

ตัวอย่าง 1

สร้างตัวนับ ("my-counter") โดยตั้งค่าเป็น 5 และเพิ่มค่าขึ้น 1 ในแต่ละครั้งที่ <h2> ปรากฏ:

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 และลดค่าลง 1 ในแต่ละครั้งที่ <h2> ปรากฏ:

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 และเพิ่มเคนเตอร์ 1 ในทุกครั้งที่เลือก <h2> ซึ่งใช้ตัวเลขโรมัน

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|ค่าเริ่มต้น|initial|inherit;

ค่าของคุณสมบัติ

การสนับสนุนเบราเซอร์

ตัวเลขในตารางบอกว่าเวอร์ชันแรกของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่。

หน้าที่เกี่ยวข้อง

อ้างอิง：::before ฟอลด์เอลิเมนต์

อ้างอิง：::after ฟอลด์เอลิเมนต์

อ้างอิง：CSS ความเนื้อหา

อ้างอิง：CSS ความเพิ่มตัวนับ

อ้างอิง：คุณได้ทราบเรื่อง CSS counter() ฟังก์ชัน