counter-increment ගුණය

counter-increment ගුණය අංග ස්වයංක්‍රීය වාරයන්ට ලබා ගැනීම සකසයි, උදාහරණයක් වශයෙන්, ඡේද හෝ ශීර්ෂ. එය එකට භාවිතා කරන්නේ counter-reset ගුණය සමග, after සහ before ප්‍රතිසම කොටස් සමග, content ගුණය සමග, එහි ඇතුළත counter ශ්‍රිතය භාවිතා කරනු ලැබේ. හොඳින් තේරුම් ගැනීම සඳහා උදාහරණ බැලීම නිර්දේශ කරමි.

වාක්‍ය රටාව

තෝරන්නා {
	counter-increment: නම [පියවර] | none;
}

අගයන්

අගය	විස්තරය
නම	ගණකයේ නම. සාමාන්‍ය වචනයක් (පංති නමක් හෝ id වැනි). වචන කිහිපයක් නම් කළ හැකිය, ඒවා හිස් තැනෙන් වෙන් කරමින්. මෙම අවස්ථාවේදී, එකවර ගණක කිහිපයක් වෙනස් වේ.
පියවර	ධන හෝ ඍණ පූර්ණ සංඛ්‍යාව. අනිවාර්ය නොවන පරාමිතිය.
`none`	වත්මන් තෝරන්නා සඳහා ගණකය වැඩි කිරීම තහනම් කරයි.

පෙරනිමි අගය: none.

උදාහරණය

ඡේද ස්වයංක්‍රීයව අංකනය වන පරිදි කරමු:

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

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

උදාහරණය

අංකනයට අමතරව වෙනත් කෙටි පෙළක් එකතු කරමු. අපගේ අවස්ථාවේ № අංකයට පෙර සහ කොමාව පසුව:

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

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

උදාහරණය

අංකනය ආරම්භ කරමු 10 සිට. මේ සඳහා ගණකයේ ආරම්භක අගය අටක් ලෙස තබමු, එනම් අපට අවශ්‍ය ප්‍රමාණයට වඩා 1 කුඩාවෙන්:

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

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

උදාහරණය

දැන් අංකනය "2" පියවරෙන් වේවා. මේ සඳහා පියවර ලෙස දෙක තබමු:

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

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* දෙක තබමු */
	content: "№" counter(test) ".";
}

උදාහරණය

පෙර උදාහරණයේ අංකනය ආරම්භ වූයේ දෙකෙන්, නමුත් අපට එකෙන් ආරම්භ කිරීමට අවශ්‍ය විය. ඇයි එසේ සිදු වූයේද? එයට හේතුව counter-reset ගණක අගයන් ශුන්‍යයට පෙරළන අතර පසුව counter-increment එහි පියවර එකතු කරයි: පෙරනිමියෙන් එක, එම නිසා පෙර අපගේ අංකනය ආරම්භ වූයේ 1 සිට. දැන් දෙක එකතු වේ - එබැවින් අංකනය ආරම්භ වන්නේ දෙකෙනි.

ගැටළුව නිරාකරණය කිරීම සඳහා ආරම්භක ගණක අගය -1 ලෙස තබමු සහ දැන් අංකනය ආරම්භ වන්නේ 1 සිට සහ වැඩි වන්නේ 2 වලින්:

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

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

තවද බලන්න

counter-reset ගුණය,
ගණකයේ අගය ශුන්‍යයට පෙරළන