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

คำอธิบายและการใช้งาน

counter() ฟังก์ชันกลับค่าในรูปแบบของตัวอักษรคำด้วยนับที่กำหนด

ตัวอย่าง

ตัวอย่าง 1

สร้างเคาน์เตอร์สำหรับหน้า (ใน selector body). เพิ่มค่าเคาน์เตอร์ให้แก่แถว <h2> และเพิ่มข้อความ "เล่มที่เก้าอี้" ก่อนแถว <h2>:

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

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

ตัวอย่าง 2

ตั้งรูปแบบนับเคาน์เตอร์:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

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

CSS กรรมวิธี

counter(countername, counterstyle)
ค่า รายละเอียด
countername

จำเป็น. ชื่อนับ (ตรงกับ counter-reset และ counter-increment ที่ใช้)

注意: ชื่อแตกต่างตามความยาวและขนาดตัวอักษร
counterstyle

เลือกได้. รูปแบบนับ (สามารถเป็นค่าของ list-style-type, ชื่อ @counter-style หรือ function symbols())

ค่าเริ่มต้นคือเลขเท่า

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

รุ่น: CSS3

การสนับสนุนโปรแกรมน่าเชิญ

เชโรม์ เอดจ์ ไฟร็อกซ์ เซฟารี่ ออเปร่า
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

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

คู่มือ：CSS นับ

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

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

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

อ้างอิง：CSS @counter-style กฎ

อ้างอิง：CSS counters() ฟังก์ชัน