Зустрічне скидання - 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), яке потім збільшується при кожному появі розділу, а потім відображається перед заголовками розділів.