ฟังก์ชัน counters() ของ CSS

การประกาศและการใช้งาน

ฟังก์ชัน counters() ของ CSS counters() ฟังก์ชันคืนค่าเป็นข้อความที่ชื่อเลขนับและเลขนับระดับที่ฝังอยู่ในระดับปัจจุบัน

ในนี้ เราใช้ counters() ฟังก์ชันส่งข้อความ (จุด) ระหว่างเลขนับระดับต่าง ๆ ที่มีรูปแบบที่ฝังอยู่

ตัวอย่าง

ตัวอย่าง 1

ในนี้ เราใช้ counters() ฟังก์ชันส่งข้อความ (จุด) ระหว่างเลขนับระดับต่าง ๆ ที่มีรูปแบบที่ฝังอยู่

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

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

ตัวอย่าง 2

ตั้งรูปแบบของเลขนับ และตั้งข้อความเชื่อมโยงเป็น "-":

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

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

การใช้ภาษา CSS

counters(countername, string, counterstyle)
ค่า คำอธิบาย
countername

จำเป็น。ชื่อเลขนับ (ตรงกับชื่อที่ใช้ในคุณสมบัติ counter-reset และ counter-increment)

แนะนำให้สนใจต่างกันกับชื่อในรูปแบบหรือเล็กใหญ่
string จำเป็น。ข้อความที่เชื่อมโยง。สามารถเป็นอักษรตัวเลขหรือตัวอักษรอื่น ๆ อย่างเสร็จสมบูรณ์
counterstyle

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

ค่าเริ่มต้นคือ decimal。

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

เวอร์ชั่น: CSS3

การสนับสนุนโปรแกรมน่าเนียน

Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

เพจที่เกี่ยวข้อง

ตัวอย่าง：CSS นับ

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

อ้างอิง：CSS counter-increment

อ้างอิง：CSS counter-reset

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

อ้างอิง：CSS counter() 函数