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

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

Thamani

Thamani chaguomsingi: none.

Mfano

Tufanye ili aya ziorodheshwe kiotomatiki:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Angalia pia