Eienskap counter-increment

Die eienskap counter-increment stel outomatiese nommering van elemente in, byvoorbeeld, paragrawe of opskrifte. Dit word saam gebruik met die eienskap counter-reset, die pseudoelemente after en before, die eienskap content, waarbinne die funksie counter gebruik word. Vir beter begrip raai ek aan om die voorbeelde te bekyk.

Sintaksis

selekteerder {
	counter-increment: naam [stap] | none;
}

Waardes

Waarde	Beskrywing
naam	Die naam van die teller. 'n Gewone woord (soos 'n klas- of id-naam). Verskeie name kan gestel word, geskei deur spasies. In hierdie geval sal verskeie tellers gelyktydig verander.
stap	Heelgetal, positief of negatief. Opsionele parameter.
`none`	Verbied die verhoging van die teller vir die huidige selekteerder.

Verstekwaarde: none.

Voorbeeld

Laat ons paragrawe outomaties laat nommer:

<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);
}

Voorbeeld

Kom ons voeg nog 'n teks by behalwe die nommering. In ons geval № voor die syfer en 'n punt daarna:

<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) ".";
}

Voorbeeld

Laat ons nommering vanaf 10 begin. Vir dit stel ons die beginwaarde van die teller op nege, dit is met 1 minder as wat ons nodig het:

<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) ".";
}

Voorbeeld

Laat die nommering nou met 'n stap van "2" wees. Vir dit stel ons 'n twee as stap in:

<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; /* stel 'n twee in */
	content: "№" counter(test) ".";
}

Voorbeeld

In die vorige voorbeeld het nommering met 'n twee begin, maar ons wou eintlik met een. Hoekom het dit gebeur? Omdat counter-reset die teller se waarde na nul herstel, en dan voeg counter-increment sy stap by: verstek is een, daarom het ons vroeër nommering met 1 begin. Maar nou word 'n twee bygetel - en die nommering begin met 'n twee.

Om die probleem reg te stel, stel ons die begin waarde van die teller op -1 en nou sal die nommering met 1 begin en met 2 vermeerder:

<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) ".";
}

Sien ook

die eienskap counter-reset,
wat die teller se waarde na nul herstel