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
selektor {
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ň:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#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:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#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:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#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:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#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:
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test -1;
}
p::before {
counter-increment: test 2;
content: "№" counter(test) ".";
}
:
Şeýle-de serediň
-
counter-resethäsiýeti,
sanaçyň bahasyny nola getirýär