Detaillierte Erläuterung des Lernens von CSS-Zählerattributen

Das CSS-Zählerattribut wird von fast allen Browsern (einschließlich IE8) unterstützt, wird jedoch nicht oft verwendet. In diesem Artikel erfahren Sie, wie Sie mehr über diese Attribute erfahren.

ZÄHLER-RESET

Klar übersetzt als Zähler-Reset. Beispielsweise: Zähler-Reset: Zählername

Häufig geschrieben als

/* Zählernamen auf 0 setzen */
Zähler-Reset: Zählername;

/* Zählernamen auf -1 setzen */
Zähler-Reset: Zählername -1;

/* Setze Zähler1 auf 1 und Zähler2 auf 4 */
Zähler-Reset: Zähler1 1 Zähler2 4;

Wird verwendet, um den Zähler eines Elements zurückzusetzen

ZÄHLER-INKREMENT

Zählerinkrement wird als Zählerreset übersetzt.

Häufig geschrieben als

/* Zählernamen um 1 erhöhen */
Zählerinkrement: Zählername;

/* Zählernamen um 1 verringern */
Zählerinkrement: Zählername -1;

/* Zähler1 um 1 erhöhen und Zähler2 um 4 verringern */
Zählerinkrement: Zähler 1 Zähler2 -4;

Bevor wir die Zählerinkrementierung verwenden, müssen wir zunächst mit dem Zählerreset einen Zähler in seinem übergeordneten Element initialisieren.

Zum Beispiel:

// Das übergeordnete Element hat einen Zähler-Reset
// angewendet, um es zu instanziieren
Abschnitt {
  Zähler-Reset: unicornCounter;
}

// das zu zählende untergeordnete Element angeben
Abschnitt h1 {
  Zählerinkrement: unicornCounter;
}

Im obigen Code wird jedes h1-Element des Abschnitts auf den Zählwert 1 gesetzt

CSS-Syntaxregeln

COUNTER-RESET und COUNTER-INCREMENT haben eine ähnliche Syntax

Der erste <custom-ident> gibt die spezifische Zählerkennung an

Kann ein Wort sein, das aus az 0-9 _ besteht - darf aber kein Schlüsselwort sein: none, unset, initial oder inherit

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.