counter-increment ගුණය

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

වාක්‍ය රටාව

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

අගයන්

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

උදාහරණය

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

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

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

Результат:

උදාහරණය

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

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

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

Результат:

උදාහරණය

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

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

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

Результат:

උදාහරණය

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

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

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

Результат:

උදාහරණය

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

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

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

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

Результат:

තවද බලන්න