CSS counter-reset

การแสดงและการใช้งาน

คุณสมบัติ counter-reset ตั้งค่าค่าเคาน์เตอร์สำหรับการปรากฎของเลือกตัวเลือกบางตัว โดยมาตราฐานคือ 0

ใช้คุณสมบัตินี้ ค่าเคาน์เตอร์สามารถตั้งหรือเริ่มต้นใหม่เป็นค่าใดก็ได้ ไม่ว่าจะเป็นค่าบวกหรือค่าลบ ถ้าไม่มีการเสนอค่า number จะเริ่มต้นที่ 0 โดยเริ่มต้น

หมายเหตุ：ถ้าใช้ "display: none" จะไม่สามารถรีเซ็ตเคาน์เตอร์ได้。ถ้าใช้ "visibility: hidden" จะสามารถรีเซ็ตเคาน์เตอร์ได้。

ดูเพิ่มเติมที่:

คู่มืออ้างอิง CSS:CSS :before โปรโมทธี

คู่มืออ้างอิง CSS:CSS :after โปรโมทธี

คู่มืออ้างอิง CSS:คุณสมบัติ content

คู่มืออ้างอิง CSS:คุณสมบัติ counter-increment

ฟังก์ชัน CSS:ฟังก์ชัน counter()

คู่มืออ้างอิง HTML DOM:คุณสมบัติ counterReset

ตัวอย่าง

วิธีที่จะทำเลขที่แสดงส่วนและหน่วยย่อย (เช่น "Section 1"、"1.1"、"1.2") คือ:

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

ลองทดลองด้วยตัวเอง

CSS ภาษา

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

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

ค่า คำอธิบาย
none โดยมาตรฐาน。ไม่สามารถรีเซ็ตเคาน์เตอร์ของเลือกตัวเลือกได้。
id number

id กำหนดเลือกตัวเลือก หรือ id หรือ class ที่จะรีเซ็ตเคาน์เตอร์。

number สามารถตั้งค่าค่าของเคาน์เตอร์ที่ปรากฏของเลือกตัวเลือกนี้ ค่านี้สามารถเป็นตัวเลขบวก หรือลบ หรือ 0。
inherit กำหนดให้คุณสมบัติ counter-reset ขององค์ประกอบพ่อมีค่าตามคุณสมบัติ counter-reset ของมัน。

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: none
การสืบทอด: no
รุ่น: CSS2
ระยะเวลา JavaScript: object.style.counterReset="subsection"

การสนับสนุนโปรแกรมน่าเชื่อถือ

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

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

หมายเหตุ：ถ้าได้กำหนด !DOCTYPE แล้ว ตัวแปลง Internet Explorer 8 (และสูงกว่า) สนับสนุนคุณสมบัติ counter-reset。