Обратно нулиране - CSS-трикове

В counter-resetимота дава възможност за автоматично номериране на елементите. Като подреден списък (

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

В counter-resetимота се използва за нулиране на CSS брояч до определена стойност.

Той е част от модула на брояча CSS, който е част от генерираното съдържание, автоматично номериране и изброява CSS2.1 спецификация, разширена в спецификацията Модул за генерирано и заменено съдържание CSS3.

Синтаксис

counter-reset: ( ?)+ | none

Където…

е името на брояча, който искате да нулирате
е стойността, към която да нулирате брояча
none деактивирайте брояча

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

Забележка: Стойността по подразбиране за цяло число е 0. Ако след името на брояча не е зададено цяло число, то ще бъде възстановено на 0. По този начин това работи както се очаква:

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

Можете да нулирате няколко брояча наведнъж със списък, разделен с интервал, всеки със своята конкретна стойност, ако желаете.

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

Това ще се върне my-awesome-counterна 5 и my-other-counterна стойността по подразбиране: 0.

Можете да видите този списък като: counter1 value1 counter2 value2 counter3 value3… . Ако дадена стойност е пропусната, тя е 0.

Демонстрация

В следващата демонстрация articleнулира sectionброяча на стойността си по подразбиране (0), която след това се увеличава при всяко появяване на секция, след което се показва пред заглавията на секциите.