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

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

ไวยากรณ์

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

ค่า

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

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

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

Результат:

ดูเพิ่มเติม