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

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

Nilai

Nilai	Keterangan
nama	Nama pembilang. Perkataan biasa (seperti nama kelas atau id). Boleh menetapkan beberapa nama, memisahkannya dengan ruang. Dalam kes ini, beberapa pembilang akan berubah serentak.
langkah	Nombor bulat positif atau negatif. Parameter pilihan.
`none`	Melarang peningkatan pembilang untuk pemilih semasa.

Nilai lalai: none.

Contoh

Mari buat agar perenggan dinomborkan secara automatik:

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

#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:

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

#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:

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

#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:

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

#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:

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

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

Lihat juga

sifat counter-reset,
yang menetapkan semula nilai pembilang kepada sifar