CSS Teller

Pizza

Hamburger

Hotdogs

CSS counters zijn "variabelen" die door CSS worden bijgehouden. De waarde kan worden verhoogd via CSS-regels (en hun gebruiksfrequentie wordt bijgehouden).

Counters laten je de look van een counter aanpassen op basis van de positie van de inhoud in het document.

Automatische nummering met counters

CSS counters zijn als "variabelen". De waarde van de variabele kan worden verhoogd via CSS-regels (en hun gebruiksfrequentie wordt bijgehouden).

Om CSS counters te gebruiken, zullen we de volgende eigenschappen gebruiken：

  • counter-reset - maak of reset de counter
  • counter-increment - verhoog de waarde van de counter
  • content - voeg gegenereerde inhoud in
  • counter() of counters() functie - voeg de waarde van de counter toe aan het element

Om CSS counters te gebruiken, moet je eerst counter-reset Maak het aan.

Het volgende voorbeeld maakt een counter voor de pagina (in de body selector) en verhoogt de counterwaarde voor elk <h2> element en voegt "Section <waarde van de counter>:" toe aan het begin van elk <h2> element：

Voorbeeld

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

Probeer het zelf

Nested counters

Het volgende voorbeeld maakt een counter voor de pagina (section) en maakt een counter voor elk <h1> element (subsection).

"section" counter voor elke <h1> element telt, en schrijft "Section" en de waarde van de section counter, "subsection" counter voor elke <h2> element telt, en schrijft de waarde van de section counter en de waarde van de subsection counter:

Voorbeeld

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

Probeer het zelf

Counters zijn ook zeer nuttig voor het maken van samenvattende lijsten, omdat er automatisch een nieuwe instance van de counter wordt gemaakt in de sub-elementen. Hier gebruiken we counters() De functie inserteert een string tussen计数器 van verschillende niveaus van nested counters：

Voorbeeld

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

Probeer het zelf

CSS Teller Eigenschap

Eigenschap Beschrijving
content Gebruik samen met ::before en ::after pseudoelementen om gegenereerde inhoud in te voegen.
counter-increment Verhoog een of meerdere tellerwaarden.
counter-reset Maak of reset een of meerdere tellers.