Xüsusiyyət counter-increment

counter-increment xüsusiyyəti elementlərin, məsələn, abzasların və ya başlıqların avtomatik nömrələnməsini təyin edir. counter-reset xüsusiyyəti ilə birlikdə, after və before psevdoelementləri, content xüsusiyyəti ilə birlikdə istifadə olunur, counter funksiyası istifadə olunur. Daha yaxşı başa düşmək üçün nümunələrə nəzər yetirməyi məsləhət görürəm.

Sintaksis

selektor {
	counter-increment: ad [addım] | none;
}

Dəyərlər

Dəyər	Açıqlama
ad	Sayğacın adı. Adi söz (class və ya id adı kimi). Bir neçə ad təyin etmək olar, onları boşluqla ayırmaq lazımdır. Bu halda eyni zamanda bir neçə sayğac dəyişəcək.
addım	Müsbət və ya mənfi tam ədəd. İxtiyari parametr.
`none`	Cari selektor üçün sayğacın artırılmasını qadağan edir.

Standart dəyər: none.

Nümunə

Gəlin abzasların avtomatik nömrələnməsini təmin edək:

<div id="parent">
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
</div>

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

Nümunə

Tutaq ki, nömrələmə ilə yanaşı, hər hansı bir mətn də əlavə olunur. Bizim vəziyyətimizdə rəqəmdən əvvəl № və sonra nöqtə:

<div id="parent">
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
</div>

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

Nümunə

Nömrələməni 10-dan başladaq. Bunun üçün sayğacın başlanğıc dəyərini doqquz edək, yəni bizə lazım olandan 1 az:

<div id="parent">
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
</div>

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

Nümunə

Tutaq ki, indi nömrələmə "2" addımı ilə olacaq. Bunun üçün addım kimi ikini qoyuruq:

<div id="parent">
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
</div>

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

Nümunə

Əvvəlki nümunədə nömrələmə ikidən başladı, amma biz birdən başlamaq istərdik. Niyə belə oldu? Çünki counter-reset sayğacın dəyərini sıfırlayır, sonra isə counter-increment öz addımını əlavə edir: standart olaraq bir, buna görə də əvvəllər bizim nömrələmə 1-dən başlayırdı. İndi isə iki əlavə olunur - və nömrələmə ikidən başlayır.

Problemi həll etmək üçün başlanğıc dəyəri -1 edək və indi nömrələmə 1-dən başlayacaq və 2 artacaq:

<div id="parent">
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
	<p>mətn</p>
</div>

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

Həmçinin bax

counter-reset xüsusiyyəti,
sayğacın dəyərini sıfırlayır