Savybė counter-increment

Savybė counter-increment nustato automatinį elementų numeravimą, pavyzdžiui, paragrafų arba antraščių. Naudojama kartu su savybe counter-reset, pseudoelementais after ir before, savybe content, kurio viduje naudojama funkcija counter. Kad geriau suprastumėte, rekomenduoju pažiūrėti pavyzdžius.

Sintaksė

cssselektorius {
  counter-increment: pavadinimas [žingsnis] | none;
}

Reikšmės

Numatytoji reikšmė: none.

Pavyzdys

Padarykime taip, kad paragrafai būtų automatiškai numeruojami:

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);
}

Результат:

Pavyzdys

Tegul be numeracijos pridedamas dar koks nors tekstas. Mūsų atveju № prieš skaičių ir taškas po:

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) ".";
}

Результат:

Pavyzdys

Pradėkime numeraciją nuo 10. Tam pradine skaitiklio reikšme nustatome devynetą, tai yra 1 mažiau, nei mums reikia:

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) ".";
}

Результат:

Pavyzdys

Tegul dabar numeracija būna su žingsniu "2". Tam kaip žingsnį nustatome dvejetą:

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; /* nustatome dvejetą */
  content: "№" counter(test) ".";
}

Результат:

Pavyzdys

Ankstesniame pavyzdyje numeracija prasidėjo nuo dvejeto, o mes norėtume nuo vieneto. Kodėl taip atsitiko? Todėl, kad counter-reset atstatė skaitiklio reikšmes į nulį, o tada counter-increment prideda savo žingsnį: pagal nutylėjimą vienetą, todėl anksčiau mes numeracija prasidėdavo nuo 1. O dabar pridedama dvejeto - ir numeracija prasideda nuo dvejeto.

Kad išspręstume problemą, nustatykime pradinę skaitiklio reikšmę į -1 ir dabar numeracija prasidės nuo 1 ir bus didinama po 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) ".";
}

Результат:

Taip pat žiūrėkite