Atrybut counter-set w CSS
- Poprzednia strona counter-reset
- Następna strona @counter-style
Definicja i użycie
counter-set
Atrybut jest używany do tworzenia i ustawiania wartości CSS licznika.
counter-set
Atrybuty są zwykle używane razem z atrybutami counter-increment i content.
Przykład
Przykład 1
Utwórz licznik ("my-counter"), ustaw go na 5 i zwiększ go o 1 przy każdym wystąpieniu selektora <h2>:
body { /* Ustaw "my-counter" na 5 */ counter-set: my-counter 5; } h2::before { /* Zwiększ "my-counter" o 1 */ counter-increment: my-counter; content: "Section " counter(my-counter) ". "; }
Przykład 2
Utwórz licznik ("my-counter"), ustaw go na 5 i zmniejsz go o 1 przy każdym wystąpieniu selektora <h2>:
body { /* Ustaw "my-counter" na 5 */ counter-set: my-counter 5; } h2::before { /* Zmniejsz "my-counter" o 1 */ counter-increment: my-counter -1; content: "Section " counter(my-counter) ". "; }
Przykład 3
Użyj formatów "Section 10:"、"10.1"、"10.2" itp. do numeracji rozdziałów i podrozdziałów:
body { /* Ustaw "section" na 9 */ counter-set: section 9; } h1 { /* Ustaw "subsection" na 0 */ counter-set: subsection 0; } h1::before { /* Zwiększ "section" o 1 */ counter-increment: section; content: "Section " counter(section) ": "; } h2::before { /* Zwiększ "subsection" o 1 */ counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }
Przykład 4
Utwórz licznik, ustaw go na 9 i zwiększ go o 1 przy każdym wystąpieniu wyborcy <h2> (używając cyfr rzymskich):
body { /* Ustaw "my-counter" na 9 */ counter-set: my-counter 9; } h2::before { /* Zwiększ "my-counter" o 1 */ counter-increment: my-counter; content: counter(my-counter, upper-roman) ". "; }
Gramatyka CSS
counter-set: none|counter-name number|initial|inherit;
Wartość atrybutu
Wartość | Opis |
---|---|
none | Domyślna wartość. Nie ustaw licznika. |
counter-name number |
Nazwa licznika do ustawienia oraz jego wartość. Każdorazowo przy wystąpieniu wyborcy, licznik zostanie ustawiony na tę wartość. Domyślna wartość wynosi 0. |
initial | Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial. |
inherit | Inhereduje tę właściwość od elementu nadrzędnego. Zobacz: inherit. |
Domyślna wartość: | none |
---|---|
Inheredność: | Nie |
Tworzenie animacji: | Nie obsługuje. Zobacz:Atrybuty animacji. |
Wersja: | CSS2 |
Gramatyka JavaScript: | object.style.counterSet="4" |
Wsparcie przeglądarek
Numer w tabeli oznacza pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
85 | 85 | 68 | 17.2 | 71 |
Powiązane strony
Zobacz:::before pseudoelement
Zobacz:::after pseudoelement
Zobacz:Atrybut content w CSS
Zobacz:Atrybut counter-increment w CSS
Zobacz:Funkcja counter() w CSS
- Poprzednia strona counter-reset
- Następna strona @counter-style