Counter-increment häsiýeti

counter-increment häsiýeti elementleriň, meselem, abzaslaryň ýa-da atlaryň awtomatik tertipleşdirilmegini belleýär. counter-reset häsiýeti bilen bilelikde, after we before pseudoelementler bilen, content häsiýeti bilen, şol häsiýetiň içinde counter funksiýasy ulanylyp, peýdalanylýar. Gowy düşünmek üçin mysallara seretmegi maslahat berýärin.

Sintaksis

cssselektor {
  counter-increment: at [ädim] | none;
}

Görnüşleri

Görnüş	Düşündiriş
at	Sanaçyň ady. Adaty söz (klassyň ýa-da id-niň ady ýaly). Boşluk bilen bölüp, birnäçe ady belläp bolýar. Bu ýagdaýda bir wagtda birnäçe sanaçy üýtgeşiklik eder.
ädim	Bitin positive ýa-da negative san. Gerek bolmadyk parametr.
`none`	Häzirki selektor üçin sanaçyň artmagyny gadagan edýär.

Bellenen ýagdaýy: none.

Mysal

Abzaslaryň awtomatik tertipleşdirilýändigini edeliň:

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

Результат:

Mysal

Tertipleşdirilik bilen bir hatarda ýene bir tekst goşulýandygyny edeliň. Bizim ýagdaýymyzda san öňünden № we san soňundan nokat:

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

Результат:

Mysal

Tertipleşdiriligi 10-dan başlalyň. Bunuň üçin sanaçyň başlangyç bahasyna dokuz goýýarys, ýagni bize gerek bolanyndan 1 az:

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

Результат:

Mysal

Indi tertipleşdiriligiň "2" ädimi bilen bolýandygyny edeliň. Bunuň üçin ädimi hökmünde iki goýýarys:

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; /* iki goýýarys */
  content: "№" counter(test) ".";
}

Результат:

Mysal

Öňki mysalda tertipleşdirilik iki bilen başlady, ýöne biz biri bilen başlamak isledik. Näme üçin şeýle boldy? Sebäbi counter-reset sanaçyň bahasyny nola getirýär, soň bolsa counter-increment öz ädimini goşýar: bellenen ýagdaýda birlik, şonuň üçin öň bizde tertipleşdirilik 1 bilen başlady. Indi bolsa iki goşulýar - we tertipleşdirilik iki bilen başlaýar.

Meseläni düzetmek üçin sanaçyň başlangyç bahasyny -1 goýýarys we indi tertipleşdirilik 1 bilen başlar we 2 artar:

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

Результат:

Şeýle-de serediň

counter-reset häsiýeti,
sanaçyň bahasyny nola getirýär