นับ CSS

Pizza

Hamburger

Hotdogs

จำนวนเลข CSS คือ "ตัวแปล" ที่เก็บโดย CSS ค่าตัวแปลสามารถเพิ่มด้วยกฎ CSS ระบุ (เพื่อติดตามจำนวนที่ใช้งาน)

จำนวนเลขสามารถปรับรูปทรงของมันตามตำแหน่งของเนื้อหาในเอกสาร

จำนวนเลขเอาตัวตนไปโดยอัตโนมัติ

จำนวนเลข CSS คล้ายตัวแปล "ตัวแปล" ค่าตัวแปลสามารถเพิ่มด้วยกฎ CSS ระบุ (ที่ติดตามจำนวนที่ใช้งาน)

เพื่อใช้จำนวนเลข CSS พวกเราจะใช้ทรัพยากรต่อไปนี้:

  • counter-reset - สร้างหรือรีเซ็ทจำนวนเลข
  • counter-increment - เพิ่มค่าจำนวนเลข
  • content - ใส่สิ่งที่สร้างขึ้น
  • counter() หรือ counters() ฟังก์ชัน - เพิ่มค่าจำนวนเลขสำหรับตัวแปล

เพื่อใช้จำนวนเลข CSS คุณจะต้องใช้ counter-reset สร้างมันได้แล้ว。

ตัวอย่างด้านล่างนี้สร้างจำนวนเลขสำหรับหน้า (ในเลือกเลขาะที่มีความยาวแบบ body) และเพิ่มจำนวนเลขสำหรับทุก <h2> และเพิ่ม "Section <value of the counter>:" ในต้นของทุก <h2>:

ตัวอย่าง

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

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

Nested counters

ตัวอย่างด้านล่างนี้สร้างจำนวนเลขสำหรับหน้า (section) และสร้างจำนวนเลขสำหรับทุก <h1> (subsection).

"section" จำนวนเลขสำหรับทุก <h1> อยู่ในลิสต์และเขียน "Section" รวมกับจำนวนเลขของจำนวนเลข "section" ซึ่งจำนวนเลขสำหรับทุก <h2> อยู่ในลิสต์รวมกับจำนวนเลขของจำนวนเลข "section" และจำนวนเลขของจำนวนเลข "subsection":

ตัวอย่าง

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

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

เมื่อเชื่อมโยงจำนวนเลขใน CSS มันมีประโยชน์มากที่สำหรับการสร้างรายการรวมเพราะจะทำการสร้างตัวแปลนี้ในลูกฟอร์มอัตโนมัติ。ในนี้เราใช้ counters() ฟังก์ชันนี้สามารถใส่สตริงในระหว่างเมื่อเน้นจำนวนเลขที่หลายระดับของเมื่อเชื่อมโยงตัวเลขเข้าในตัวแปลนี้:

ตัวอย่าง

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

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

CSS property ตัวนับ

property การอธิบาย
content ใช้พร้อมกับ ซีคันด์เอลิเมนต์ ::before และ ::after สำหรับการแทนที่เนื้อหาที่สร้างขึ้น
counter-increment เพิ่มค่าตัวนับหนึ่งหรือหลายตัว
counter-reset สร้างหรือเริ่มต้นตัวนับหนึ่งหรือหลายตัว