Sifat counter-increment

Sifat counter-increment menetapkan penomboran elemen automatik, contohnya, perenggan atau tajuk. Digunakan bersama-sama dengan sifat counter-reset, pseudoelemen after dan before, sifat content, di dalamnya digunakan fungsi counter. Untuk pemahaman yang lebih baik, saya cadangkan untuk melihat contoh-contoh.

Sintaks

csspemilih {
  counter-increment: nama [langkah] | none;
}

Nilai

Nilai lalai: none.

Contoh

Mari buat agar perenggan dinomborkan secara automatik:

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

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

Результат:

Contoh

Katakan selain penomboran, ditambahkan juga beberapa teks. Dalam kes kami № sebelum digit dan titik selepas:

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

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

Результат:

Contoh

Mari mulakan penomboran dari 10. Untuk ini nilai awal pembilang kita letakkan sembilan, iaitu 1 kurang daripada yang kita perlukan:

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

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

Результат:

Contoh

Sekarang mari penomboran mempunyai langkah "2". Untuk ini sebagai langkah kita letakkan dua:

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

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

Результат:

Contoh

Dalam contoh sebelumnya, penomboran bermula dari dua, tetapi kami ingin dari satu. Mengapa ini berlaku? Kerana counter-reset menetapkan semula nilai pembilang kepada sifar, kemudian counter-increment menambahkan langkahnya: secara lalai satu, itulah sebabnya sebelum ini kami penomboran bermula dari 1. Sekarang ditambahkan dua - dan penomboran bermula dengan dua.

Untuk menyelesaikan masalah ini, mari letakkan nilai awal pembilang kepada -1 dan sekarang penomboran akan bermula dari 1 dan akan bertambah sebanyak 2:

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

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

Результат:

Lihat juga