Sifa counter-increment

Sifa counter-increment huweka kuorodhesha kiotomatiki kwa vipengele, kwa mfano, aya au vichwa. Hutumiwa pamoja na sifa counter-reset, pseudoelements after na before, sifa content, ndani yake ambayo kazi counter hutumiwa. Kwa uelewa bora napendekeza uangalie mifano.

Syntax

kichagua {
	counter-increment: jina [kiwango] | none;
}

Thamani

Thamani	Maelezo
jina	Jina la kihesabu. Neno la kawaida (kama jina la darasa au kitambulisho). Inaweza kuweka majina kadhaa, kuyatenganisha na nafasi. Katika kesi hii, vihesabu kadhaa vitabadilishwa wakati huo huo.
kiwango	Nambari kamili chanya au hasi. Kigeuzi kisichohitajika.
`none`	Inakataza kuongezeka kwa kihesabu kwa kichaguli cha sasa.

Thamani chaguomsingi: none.

Mfano

Tufanye ili aya ziorodheshwe kiotomatiki:

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

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

Mfano

Acha kuorodhesha kuongeze maandishi mengine yoyote. Katika kesi yetu № mbele ya nambari na nukta baada:

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

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

Mfano

Tuanze kuorodhesha kutoka 10. Kwa hili tunaweka thamani ya kwanza ya kihesabu kuwa tisa, yaani kwa 1 chini ya ile tunayohitaji:

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

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

Mfano

Acha kuorodhesha sasa iwe na kiwango cha "2". Kwa hili tunaweka wili kama kiwango:

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

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

Mfano

Katika mfano uliopita, kuorodhesha kilianza na wili, lakini tungependa kuanza na moja. Kwa nini hili lilitokea? Kwa sababu counter-reset hurejesha thamani za kihesabu hadi sifuri, kisha counter-increment huongeza kiwango chake: Kwa chaguomsingi ni moja, ndiyo maana awali kuorodhesha kulikuwa kunaanza na 1. Lakini sasa wili inaongezwa - na kuorodhesha kunaanza na wili.

Kurekebisha tatizo, tunaweka thamani ya kwanza ya kihesabu kuwa -1 na sasa kuorodhesha kutaanza na 1 na kutaongezeka kwa 2:

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

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

Angalia pia

sifa counter-reset,
ambayo huelekeza tena thamani ya kihesabu hadi sifuri