Atrybut counter-set w CSS

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) ". ";
}

Spróbuj sam

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) ". ";
}

Spróbuj sam

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) " ";
}

Spróbuj sam

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) ". ";
}

Spróbuj sam

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