Atrybut counter-increment w CSS

Definicja i użycie

Właściwość counter-increment ustawia przyrost licznika dla każdego wybranego selektora. Domyślny przyrost to 1.

Wyjaśnienie

Używając tej właściwości, licznik może zwiększać (lub zmniejszać) pewną wartość, która może być wartością dodatnią lub ujemną. Jeśli nie podano wartości number, domyślnie wynosi 1.

Uwaga:Jeśli użyto "display: none", nie można zwiększyć licznika. Jeśli użyto "visibility: hidden", można zwiększyć licznik.

Patrz również:

CSS Reference Manual:Pseudoelement :before w CSS

CSS Reference Manual:Pseudoelement :after w CSS

CSS Reference Manual:Atrybut content

CSS Reference Manual:Atrybut counter-reset

CSS Function:Funkcja counter()

HTML DOM Reference Manual:Atrybut counterIncrement

Przykład

Metoda numerowania części i podrozdziałów (np. "Section 1", "1.1", "1.2"):

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

Spróbuj sam

CSS Syntax

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

Wartość atrybutu

Wartość Opis
none Domyślnie. Wybór nie ma przyrostu licznika.
id number

id Definiuje selektor, id lub klasę, która zostanie zwiększona przez licznik.

number Definiuje przyrost. Liczba może być liczbą dodatnią, zerem lub liczbą ujemną.
inherit Definiuje wartość atrybutu counter-increment, którą należy dziedziczyć od elementu nadrzędnego.

Techniczne szczegóły

Domyślna wartość: none
Inheritance: no
Wersja: CSS2
JavaScript Syntax: object.style.counterIncrement="subsection"

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Uwaga:Jeśli zdefiniowano !DOCTYPE, to Internet Explorer 8 (i wersje wyższe) obsługuje atrybut counter-increment.