CSS Counter-Increment- Eigenschaft
Beispiel
Erstellen Sie einen Zähler ("my-sec-counter") und erhöhen Sie ihn für jedes Vorkommen des <h2>-Selektors um eins:
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) ". ";
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die counter-increment
Eigenschaft erhöht oder verringert den Wert eines oder mehrerer CSS-Zähler.
Die counter-increment
Eigenschaft wird normalerweise zusammen mit der
Counter-Reset- Eigenschaft und der
Content - Eigenschaft verwendet.
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS2 |
JavaScript-Syntax: | Objekt .style.counterIncrement = "Unterabschnitt"; |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS-Syntax
counter-increment: none|id|initial|inherit;
Eigenschaftswerte
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 |
Mehr Beispiele
Beispiel
Erstellen Sie einen Zähler ("my-sec-counter") und verringern Sie ihn für jedes Vorkommen des <h2>-Selektors um eins:
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) ". ";
}
Beispiel
Nummerierung von Abschnitten und Unterabschnitten mit „Abschnitt 1:“, „1.1“, „1.2“ usw.:
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) " ";
}
Beispiel
Erstellen Sie einen Zähler und erhöhen Sie ihn um eins (mit römischen Ziffern) für jedes Vorkommen des <h2>-Selektors:
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) ". ";
}
Verwandte Seiten
CSS-Referenz: ::before Pseudoelement
CSS-Referenz: ::after Pseudo-Element
CSS-Referenz: Inhaltseigenschaft
CSS-Referenz: Counter-Reset-Eigenschaft
CSS-Funktionen: Funktion counter()
HTML-DOM-Referenz: CounterIncrement-Eigenschaft