CSS Counter-Reset- 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-reset
Eigenschaft erstellt oder setzt einen oder mehrere CSS-Zähler zurück.
Die counter-reset
Eigenschaft wird normalerweise zusammen mit der
Counter-Increment- Eigenschaft und der
Content - Eigenschaft verwendet.
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS2 |
JavaScript-Syntax: | Objekt .style.counterReset="Abschnitt" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS-Syntax
counter-reset: none|name number|initial|inherit;
Eigenschaftswerte
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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-Increment-Eigenschaft
CSS-Funktionen: Funktion counter()
HTML-DOM-Referenz: counterReset-Eigenschaft