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-reset
สร้างหรือรีเซ็ตตัวนับ CSS ตั้งแต่หนึ่งตัวขึ้นไป
คุณสมบัติcounter-reset
มักจะใช้ร่วมกับคุณสมบัติ
เคาน์เตอร์เพิ่มและ
คุณสมบัติเนื้อหา
ค่าเริ่มต้น: | ไม่มี |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.counterReset="section" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
ไวยากรณ์ CSS
counter-reset: none|name number|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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: คุณสมบัติ counterReset