Właściwość kontr-przyrostu CSS

❮ Poprzedni Pełne odniesienie CSS Dalej _

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-incrementzwiększa lub zmniejsza wartość jednego lub więcej liczników CSS.

Właściwość counter-incrementjest zwykle używana razem z właściwością resetowania licznika i właściwością content .

Domyślna wartość:	Żaden
Dziedziczny:	nie
Animowalny:	nie. Przeczytaj o animacji
Wersja:	CSS2
Składnia JavaScript:	obiekt .style.counterIncrement = "podsekcja";

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-increment	4.0	8.0	2.0	3.1	9.6

Składnia CSS

counter-increment: none|id|initial|inherit;

Wartości nieruchomości

Value	Description
none	Default value. No counters will be incremented
id number	The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial 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) ". ";
}