CSS ความเพิ่มนับเลขนับ

การระบุและการใช้งาน

คุณสมบัติ counter-increment กำหนดการเพิ่มตัวนับในแบบตัวเลือกที่ถูกเลือกใช้ จากการปรากฏของตัวเลือกที่เป็นตัวเลือกครั้งแรก ค่าเพิ่มเริ่มต้นคือ 1

ชี้แจง

ใช้นามสาขานี้ ตัวนับสามารถเพิ่ม (หรือลด) ค่าเฉพาะหนึ่ง ซึ่งอาจเป็นค่าบวกหรือค่าลบ ถ้าไม่มีค่า number จะใช้ค่าเริ่มต้น 1

หมายเหตุ:ถ้าใช้ "display: none" จะไม่สามารถเพิ่มตัวเลขได้ ถ้าใช้ "visibility: hidden" จะสามารถเพิ่มตัวเลขได้

ดูเพิ่มเติม

คู่มือ CSSCSS :before ปลายทางปลายทาง

คู่มือ CSSCSS :after ปลายทางปลายทาง

คู่มือ CSSคุณสมบัติ content

คู่มือ CSSคุณสมบัติ counter-reset

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

คู่มือ HTML DOMคุณสมบัติ counterIncrement

ตัวอย่าง

วิธีที่จะทำเลขให้ส่วนและส่วนย่อย (เช่น "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-increment: none|id|initial|inherit;

ค่าของประกาศ

ค่า รายละเอียด
none ปริยาย
id number

id กำหนดโซ่ใดที่จะเพิ่มตัวเลข

number กำหนดปริมาณเพิ่มเติม。

inherit กำหนดให้มีค่าจากตัวปลายทางเจาะจง counter-increment ของคุณสมบัติ counter-increment。

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

ค่าปริยาย: none
การสืบทอด: no
เวอร์ชั่น: CSS2
ระยะเวลา JavaScript: object.style.counterIncrement="subsection"

การสนับสนุนโปรแกรมน่าใช้

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

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

หมายเหตุ:ถ้าได้กำหนด !DOCTYPE แล้ว บราวเซอร์ Internet Explorer 8 (และรุ่นต่อไป) สนับสนุนคุณสมบัติ counter-increment。