ฟังก์ชัน ตัว นับ CSS ()
ตัวอย่าง
สร้างตัวนับสำหรับหน้า (ในตัวเลือกเนื้อหา) เพิ่มค่าตัวนับสำหรับแต่ละองค์ประกอบ <h2> และเพิ่มข้อความ "ส่วน < ค่าของตัวนับ >:" ก่อนองค์ประกอบแต่ละ <h2>:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ฟังก์ชันตัวนับ () ส่งคืนค่าปัจจุบันของตัวนับที่มีชื่อเป็นสตริง
รุ่น: | CSS3 |
---|
รองรับเบราว์เซอร์
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์ CSS
counter(countername,
counterstyle)
Value | Description |
---|---|
countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
counterstyle | Optional. The style of the counter (can be a list-style-type value) |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดรูปแบบของเคาน์เตอร์:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติเนื้อหา
การอ้างอิง CSS: คุณสมบัติการเพิ่มเคาน์เตอร์
การอ้างอิง CSS: คุณสมบัติการรีเซ็ตตัวนับ