Nasprotna ponastavitev - CSS-triki

counter-resetLastnost omogoča avtomatsko številčenje elementov. Kot urejeni seznam (

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

counter-resetLastnost se uporablja za ponastavitev CSS števec na dano vrednost.

Je del modula števca CSS, ki je del ustvarjene vsebine, samodejnega oštevilčenja in navaja specifikacijo CSS2.1, razširjeno v specifikaciji Generiran in nadomeščen modul vsebine CSS3.

Sintaksa

counter-reset: ( ?)+ | none

Kje…

je ime števca, ki ga želite ponastaviti
je vrednost za ponastavitev števca
none onemogoči števec

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

Opomba: privzeta vrednost za celo število je 0. Če po imenu števca ni nastavljeno nobeno število, bo ponastavljeno na 0. Tako to deluje po pričakovanjih:

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

Naenkrat lahko ponastavite več števcev s presledkom ločenim seznamom, vsak s svojo določeno vrednostjo, če želite.

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

To se ponastavi my-awesome-counterna 5 in my-other-counterna privzeto vrednost: 0.

Ogledate si lahko ta seznam kot: counter1 value1 counter2 value2 counter3 value3… . Če je vrednost izpuščena, je 0.

Demo

V naslednji predstavitvi articleponastavi sectionštevec na privzeto vrednost (0), ki se nato poveča ob vsakem pojavljanju odseka in nato prikaže pred naslovi odsekov.