คุณสมบัติการเพิ่มเคาน์เตอร์ CSS
ตัวอย่าง
สร้างตัวนับ ("my-sec-counter") และเพิ่มขึ้นทีละตัวสำหรับการเกิดขึ้นของตัวเลือก <h2> แต่ละครั้ง:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติcounter-increment
เพิ่มหรือลดค่าของตัวนับ CSS หนึ่งตัวขึ้นไป
คุณสมบัติcounter-increment
นี้มักจะใช้ร่วมกับ
คุณสมบัติ การรีเซ็ตตัวนับและ
คุณสมบัติเนื้อหา
ค่าเริ่มต้น: | ไม่มี |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.counterIncrement = "ส่วนย่อย"; |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
ไวยากรณ์ CSS
counter-increment: none|id|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
สร้างตัวนับ ("my-sec-counter") และลดลงหนึ่งตัวสำหรับการเกิดขึ้นของตัวเลือก <h2> แต่ละครั้ง:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
ตัวอย่าง
การกำหนดหมายเลขส่วนและส่วนย่อยด้วย "ส่วนที่ 1:", "1.1", "1.2" เป็นต้น:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
ตัวอย่าง
สร้างตัวนับและเพิ่มทีละตัว (โดยใช้เลขโรมัน) สำหรับแต่ละตัวเลือก <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: ::before pseudo element
การอ้างอิง CSS: ::หลังจากองค์ประกอบหลอก
การอ้างอิง CSS: คุณสมบัติเนื้อหา
การอ้างอิง CSS: คุณสมบัติการรีเซ็ตตัวนับ
ฟังก์ชัน CSS: ฟังก์ชันตัวนับ ()
การอ้างอิง HTML DOM: คุณสมบัติ counterIncrement