คุณสมบัติ counter-increment

คุณสมบัติ counter-increment กำหนด การนับหมายเลขอัตโนมัติขององค์ประกอบ เช่น ย่อหน้าหรือหัวข้อ ใช้ร่วมกับ คุณสมบัติ counter-reset, pseudoelements after และ before, คุณสมบัติ content, ภายในซึ่งใช้ฟังก์ชัน counter เพื่อความเข้าใจที่ดีขึ้นขอแนะนำให้ดู ตัวอย่าง

ไวยากรณ์

selector {
	counter-increment: name [increment] | none;
}

ค่า

ค่า	คำอธิบาย
name	ชื่อของตัวนับ คำทั่วไป (เหมือนชื่อ class หรือ id) สามารถกำหนดหลายชื่อได้โดยคั่นด้วยช่องว่าง ในกรณีนี้ตัวนับหลายตัวจะถูกเปลี่ยนพร้อมกัน
increment	จำนวนเต็มบวกหรือลบ พารามิเตอร์ที่ไม่จำเป็น
`none`	ห้ามเพิ่มค่าตัวนับสำหรับ selector ปัจจุบัน

ค่าเริ่มต้น: none

ตัวอย่าง

ทำให้ย่อหน้าได้รับการนับหมายเลขอัตโนมัติ:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

ตัวอย่าง

ให้นอกจากตัวเลขแล้วยังเพิ่มข้อความอื่น ด้วย ในกรณีของเรา № ด้านหน้าตัวเลข และจุดด้านหลัง:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

ตัวอย่าง

เริ่มการนับจาก 10 สำหรับสิ่งนี้ ตั้งค่าเริ่มต้นของตัวนับเป็นเก้า นั่นคือ 1 น้อยกว่าที่เราต้องการ:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

ตัวอย่าง

ตอนนี้ให้การนับมีขั้นตอน "2" สำหรับสิ่งนี้ให้ใส่สองเป็นขั้นตอน:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* ใส่สอง */
	content: "№" counter(test) ".";
}

ตัวอย่าง

ในตัวอย่างก่อนหน้านี้การนับเริ่มต้นด้วย สอง แต่เราอยากได้จากหนึ่ง ทำไม ถึงเกิดขึ้นเช่นนี้? เพราะ counter-reset รีเซ็ตค่าของตัวนับเป็นศูนย์ จากนั้น counter-increment เพิ่มขั้นตอนของมัน: โดยค่าเริ่มต้นคือหนึ่ง ดังนั้นก่อนหน้านี้เรา เริ่มการนับจาก 1 แต่ตอนนี้ บวกสอง - และการนับเริ่มต้น จากสอง

เพื่อแก้ปัญหาให้ตั้งค่าเริ่มต้น ของตัวนับเป็น -1 และตอนนี้ การนับจะเริ่มจาก 1 และจะ เพิ่มขึ้นทีละ 2:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

ดูเพิ่มเติม

คุณสมบัติ counter-reset,
ซึ่งรีเซ็ตค่าตัวนับเป็นศูนย์