counter-increment xususiyati

counter-increment xususiyati elementlarni, masalan, abzatslar yoki sarlavhalarni avtomatik raqamlashni belgilaydi. counter-reset xususiyati bilan birgalikda ishlatiladi, after va before psevdoelementlari, content xususiyati bilan birgalikda ishlatiladi, unda counter funksiyasi qo'llaniladi. Yaxshiroq tushunish uchun misollarni ko'rib chiqishni tavsiya qilaman.

Sintaksis

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

Qiymatlar

Qiymat	Ta'rif
nom	Hisoblagich nomi. Oddiy so'z (class yoki id nomi kabi). Bir nechta nom berish mumkin, ularni probel bilan ajratib. Bunda bir vaqtning o'zida bir nechta hisoblagich o'zgaradi.
qadam	Musbat yoki manfiy butun son. Ixtiyoriy parametr.
`none`	Joriy selector uchun hisoblagichni oshirishni taqiqlaydi.

Standart qiymat: none.

Misol

Abzatslar avtomatik raqamlanishi uchun:

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

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

Misol

Raqamlash bilan birga qo'shimcha matn qo'shilsin. Bizning holatda raqam oldidan № va keyin nuqta:

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

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

Misol

Raqamlash 10 dan boshlansin. Buning uchun hisoblagichning boshlang'ich qiymatini to'qqizga o'rnatamiz, ya'ni bizga kerakligidan 1 ga kamroq:

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

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

Misol

Endi raqamlash "2" qadamida bo'lsin. Buning uchun qadam sifatida ikkini o'rnatamiz:

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

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* ikkini o'rnatamiz */
	content: "№" counter(test) ".";
}

Misol

Oldingi misolda raqamlash ikkidan boshlandi, lekin biz birlikdan boshlashni xohladik. Nima sababdan shunday bo'ldi? Chunki counter-reset hisoblagich qiymatini nolga o'rnatadi, so'ngra counter-increment o'z qadamini qo'shadi: standart bo'yicha birlik, shuning uchun avval bizda raqamlash 1 dan boshlangan. Endi esa ikkita qo'shiladi - va raqamlash ikki dan boshlanadi.

Muammoni hal qilish uchun boshlang'ich hisoblagich qiymatini -1 ga o'rnatamiz va endi raqamlash 1 dan boshlanadi va 2 ga oshadi:

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

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

Shuningdek qarang

counter-reset xususiyati,
bu hisoblagich qiymatini nolga o'rnatadi