css властивість counter-reset
Властивість counter-reset встановлює змінну, в якій буде зберігатися лічильник відображень певного елемента, а також початкове значення цього лічильника.
article {
counter-reset: section;
}
section {
counter-increment: section;
}
section h2:before {
content: counter(section) '. ';
}
Лічильник може виводитися за допомогою властивості content та псевдо елементів :after чи :before.
Кожен елемент має набір лічильників, які успадковуються через дерево документів. Лічильники мають ім'я, ціле значення та елемент-творець. Вони також можуть мати ще один вкладений лічильник.
Властивість counter-reset створює один або кілька нових лічильників для елементу. Кожен лічильник має ім'я / ідентифікатор і підрахунок, пов'язаний з цим ідентифікатором.
Синтаксис
counter-reset: none|name number|initial|inherit;Властивість counter-reset може отримувати 5 значень:
noneЗабороняє ініціацію лічильника для поточного селектора
nameЗадає одну або кілька змінних, в яких буде зберігатися значення лічильника. Значення розділяються між собою пробілом
numberПочаткове значення кожного ідентифікатора. Без задання дорівнює 0
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.counterReset="section" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| counter-reset | 2.0 |
8.0 |
1.0 |
3.0 |
9.2 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| counter-reset | 2.1 |
1.0 |
3.0 |
Мобільних переглядачів ще не додано.
Приклади
Використання
Шлях до числа розділів і підрозділів з "Розділ 1", "1.1", "1.2" тощо
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}