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

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

Waardes

Verstekwaarde: none.

Voorbeeld

Laat ons paragrawe outomaties laat nommer:

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

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

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

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

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

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

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

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

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

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

Результат:

Sien ook