Pretatiestatīšana - CSS-triki

counter-resetĪpašums pieļauj automātisku numerāciju elementiem. Tāpat kā sakārtots saraksts (

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

counter-resetĪpašums tiek izmantots, lai atjaunotu CSS skaitītāju uz konkrētu vērtību.

Tā ir daļa no CSS skaitītāja moduļa, kas ir daļa no ģenerētā satura, automātiskās numerācijas un uzskaita CSS2.1 specifikāciju, kas paplašināta ģenerētā un aizstātā satura moduļa CSS3 specifikācijā.

Sintakse

counter-reset: ( ?)+ | none

Kur…

ir tā skaitītāja nosaukums, kuru vēlaties atiestatīt
ir vērtība, uz kuru atiestatīt skaitītāju
none atspējojiet skaitītāju

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

Piezīme: veselā skaitļa noklusējuma vērtība ir 0. Ja pēc skaitītāja nosaukuma nav iestatīts vesels skaitlis, tas tiks atiestatīts uz 0. Tādējādi tas darbojas kā paredzēts:

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

Varat atiestatīt vairākus skaitītājus vienlaikus ar atstarpēm atdalītu sarakstu, katram no kuriem ir īpaša vērtība, ja vēlaties.

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

Tas tiks atiestatīts my-awesome-counteruz 5 un my-other-counternoklusējuma vērtību: 0.

Jūs varat redzēt šo sarakstu, kā: counter1 value1 counter2 value2 counter3 value3… . Ja vērtība tiek izlaista, tā ir 0.

Demonstrācija

Šajā demonstrācijā tiek articleatiestatīts sectionskaitītājs tā noklusējuma vērtībai (0), kas pēc tam tiek palielināta katrā sadaļas gadījumā, pēc tam tiek parādīta sadaļu virsrakstu priekšā.