CSS counters() funktion

definition och användning

CSS: counters() Funktionen returnerar det aktuella värdet för namngivna räknare och nästlade räknare som en sträng.

Här använder vi counters() Funktionen lägger till en teckensträng mellan räknare på olika nivåer i en nästlad struktur.

exempel

Exempel 1

Här använder vi counters() Funktionen lägger till en teckensträng mellan räknare på olika nivåer i en nästlad struktur (en punkt):

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Prova själv

Exempel 2

Ställ in räknarens stil och sätt kopplingssträngen till "-":

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

Prova själv

CSS-syntax

counters(countername, string, counterstyle)
värde beskrivning
countername

obligatoriskt. Räknarens namn (samma som används i counter-reset och counter-increment-attributen).

Observera att namnen är känsliga för storlek och litenhet.
string obligatoriskt. Kopplingssträng. Kan vara ett obegränsat antal texttecken.
counterstyle

valfritt. Stilmönstret för räknare (kan vara list-style-type-värde, @counter-style namn eller symbols() funktion).

Standardvärdet är decimal.

tekniska detaljer

Version: CSS3

webbläsarstöd

Chrome Edge Firefox Safari Opera
stöd stöd stöd stöd stöd

relaterade sidor

Lär dig:CSS räknare

Referens:CSS content egenskap

Referens:CSS counter-increment egenskap

Referens:CSS counter-reset egenskap

Referens:CSS @counter-style-regel

Referens:CSS counter() funktion