CSS Counter-reset Property
Przykład
Utwórz licznik ("licznik-my-sekund") i zwiększaj go o jeden dla każdego wystąpienia selektora <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość counter-reset
tworzy lub resetuje jeden lub więcej liczników CSS.
Właściwość counter-reset
jest zwykle używana razem z właściwością
counter-increment i właściwością
content .
Domyślna wartość: | Żaden |
---|---|
Dziedziczny: | nie |
Animowalny: | nie. Przeczytaj o animacji |
Wersja: | CSS2 |
Składnia JavaScript: | obiekt .style.counterReset="sekcja" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Składnia CSS
counter-reset: none|name number|initial|inherit;
Wartości nieruchomości
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Utwórz licznik ("licznik-my-sekund") i zmniejsz go o jeden dla każdego wystąpienia selektora <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Przykład
Numeracja sekcji i podrozdziałów za pomocą „Sekcja 1:”, „1.1”, „1.2” itp.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Przykład
Utwórz licznik i zwiększ go o jeden (za pomocą cyfr rzymskich) dla każdego wystąpienia selektora <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Powiązane strony
Odniesienie CSS: ::przed pseudoelementem
Odniesienie CSS: ::po pseudo elemencie
Odniesienie CSS: właściwość treści
Odniesienie CSS: właściwość licznika przyrostu
Funkcje CSS: funkcja counter()
Dokumentacja HTML DOM: właściwość counterReset