การใช้เคาน์เตอร์ CSS
เคาน์เตอร์ CSS เป็นเหมือน "ตัวแปร" ค่าตัวแปรสามารถเพิ่มขึ้นตามกฎ CSS (ซึ่งจะติดตามกี่ครั้งพวกเขาจะใช้)
จะทำงานร่วมกับเคาน์เตอร์ CSS เราจะใช้คุณสมบัติดังต่อไปนี้:
-
counter-reset- สร้างหรือรีเซ็ตเคาน์เตอร์ -
counter-increment- เพิ่มขึ้นทีละค่าเคาน์เตอร์ -
content- แทรกเนื้อหาที่สร้างขึ้น -
counter()หรือcounters()ฟังก์ชั่น - เพิ่มมูลค่าของเคาน์เตอร์เพื่อองค์ประกอบ
หากต้องการใช้ CSS เคาน์เตอร์ก็ต้องแรกถูกสร้างขึ้นด้วย counter-reset
ตัวอย่างต่อไปนี้สร้างเคาน์เตอร์สำหรับหน้าเว็บ (ในตัวเลือกของร่างกาย) แล้วเพิ่มค่าตัวนับสำหรับแต่ละ <h2> องค์ประกอบและเพิ่ม "Section < value of the counter >:" จุดเริ่มต้นของแต่ละ <h2> องค์ประกอบ:
ตัวอย่าง
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
ลองตัวเอง» เคาน์เตอร์รัง
ตัวอย่างต่อไปนี้สร้างหนึ่งเคาน์เตอร์สำหรับหน้า (มาตรา) และเคาน์เตอร์สำหรับแต่ละ <h1> องค์ประกอบ (ย่อย) "section" เคาน์เตอร์จะถูกนับสำหรับแต่ละ <h1> องค์ประกอบด้วย "Section < value of the section counter >." และ "subsection" เคาน์เตอร์จะถูกนับสำหรับแต่ละ <h2> องค์ประกอบด้วย "< value of the section counter >.< value of the subsection counter >" :
ตัวอย่าง
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) " ";
} ลองตัวเอง» เคาน์เตอร์ยังสามารถเป็นประโยชน์ในการทำรายการที่ระบุไว้เพราะตัวอย่างใหม่ของเคาน์เตอร์ถูกสร้างโดยอัตโนมัติในองค์ประกอบของเด็ก ที่นี่เราใช้ counters() ทำงานเพื่อแทรกสตริงระหว่างระดับที่แตกต่างกันของเคาน์เตอร์ซ้อนกัน:
ตัวอย่าง
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} ลองตัวเอง» คุณสมบัติ CSS เคาน์เตอร์
| คุณสมบัติ | ลักษณะ |
|---|---|
| content | ใช้กับ :: :: ก่อนและหลังจากที่หลอกองค์ประกอบที่จะแทรกเนื้อหาที่สร้าง |
| counter-increment | เพิ่มขึ้นทีละหนึ่งหรือค่าตัวนับเพิ่มเติม |
| counter-reset | สร้างหรือรีเซ็ตหนึ่งหรือมากกว่าเคาน์เตอร์ |