Vastakuittaus - CSS-temppuja

counter-resetOminaisuus mahdollistaa automaattisen numerointi elementtejä. Kuten järjestetty luettelo (

), mutta se toimii mille tahansa elementille. Se on erityisen hyödyllinen, kun luodaan sisällysluettelo tai otsikkojen numerointi jotain opinnäytetyön kaltaista. Laskureita käytetään sisältöomaisuuden kautta. Yksinkertainen esimerkki:

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

counter-resetOmaisuus nollataan CSS laskuri tiettyyn arvoon.

Se on osa CSS-laskurimoduulia, joka on osa luotua sisältöä, automaattista numerointia ja sisältää luettelon CSS2.1-spesifikaatioista, joita on laajennettu luodun ja korvatun sisältömoduulin CSS3-spesifikaatioon.

Syntaksi

counter-reset: ( ?)+ | none

Missä…

• on nollattavan laskurin nimi
• on arvo, jolle laskuri nollataan
• none poista laskuri käytöstä

body ( counter-reset: my-awesome-counter 0; )

Huomautus: kokonaisluvun oletusarvo on 0. Jos laskurin nimen jälkeen ei ole asetettu kokonaislukua, se nollataan 0. Siten tämä toimii odotetusti:

body ( counter-reset: my-awesome-counter; )

Voit nollata useita laskureita kerralla välilyönnillä erotetulla luettelolla, joista jokaisella on oma arvo, jos haluat.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Tämä palautuu my-awesome-counterarvoon 5 ja my-other-counteroletusarvoon: 0.

Voit nähdä tämän luettelon: counter1 value1 counter2 value2 counter3 value3… . Jos arvo jätetään pois, se on 0.

Demo

Seuraavissa demo, articlepalautuu sectionlaskuri sen oletusarvo (0), joka on sitten kasvatetaan jokaisella osa esiintyessään, näytetään sitten edessä otsikoiden.

Katso tämä kynä!

Lisää tietoa

• laskuri vasta-reset
• counter-reset MDN: ssä

Selaimen tuki

Kromi	Safari	Firefox	Ooppera	IE	Android	iOS
2+	3.1+	Minkä tahansa	9.2+	8+	Minkä tahansa	Minkä tahansa