CSS function counter
Опис
Функція counter() в CSS використовується для створення лічильника, який можна використовувати для нумерації елементів в документі. Ця функція дозволяє створювати власні лічильники і використовувати їх значення для відображення номерів або міток елементів.
Функція counter() використовується спільно з властивістю counter-reset, яка визначає початкове значення лічильника, та властивістю content, яка визначає спосіб відображення значення лічильника. Щоб використати функцію counter(), спочатку ви встановлюєте лічильник за допомогою counter-reset, а потім використовуєте counter() у властивості content для відображення значення лічильника.
Ось короткий приклад використання функції counter():
body {
counter-reset: my-counter;
}
h1::before {
content: counter(my-counter) ". ";
counter-increment: my-counter;
}
У цьому прикладі ми спочатку встановлюємо лічильник my-counter за допомогою counter-reset. Потім за допомогою content і counter-increment ми використовуємо функцію counter() для відображення номерів заголовків h1. Кожен заголовок буде мати префікс номера, який визначається лічильником my-counter.
Таким чином, використання функції counter() дозволяє вам створювати нумерацію елементів на вашому веб-сайті та контролювати відображення номерів за допомогою властивостей counter-reset, content та counter-increment.
- Порада
-
Використовуйте
автор: Bondcounter()разом з псевдокласамиcounter-resetта псевдоелементами::beforeабо::after, щоб створювати лічильники. - Порада
-
Зверніть увагу на правильне форматування та стиль лічильника, щоб відповідати вашим потребам дизайну.
автор: Bond - Нотатка
-
Значення за замовчуванням (
автор: Bondfallback) використовується, якщо лічильник не визначено, тому обережно встановлюйте його, щоб забезпечити правильне відображення, якщо лічильник не існує. - Нотатка
-
Зверніть увагу, що функція
автор: Bondcounter()має багато варіантів використання та комбінацій з іншими CSS властивостями, такими якlist-styleтаcontent.
Синтаксис
counter(name, style, fallback);Функція counter може отримувати 3 значень:
-
<name> -
Рядок, що представляє ім'я лічильника.
автор: Bond -
<style> -
Рядок, що визначає стиль форматування лічильника (наприклад,
автор: Bonddecimal,lower-alpha,upper-romanтощо). -
<fallback> -
Рядок або число, яке використовується як значення лічильника, якщо лічильник не визначено.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 9.2 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі, кожен пункт списку має власне унікальне значення лічильника. За допомогою селекторів nth-child, ми можемо встановити початкове значення лічильника для кожного пункту. Перший пункт списку має значення лічильника 1 (за замовчуванням), другий пункт має значення 5, а третій пункт має значення 10.
У цьому прикладі, окремий елемент списку буде виділено відмінним кольором, використовуючи лічильник.
Коментарі
Коментарів ще немає — будьте першим!