Pseudoelemente in CSS sind eigentlich sehr einfach zu verwenden, aber viele Leute denken jetzt vielleicht nur, dass der Wert des Inhaltsattributs, der üblicherweise in Pseudoelementen verwendet wird, nur Zeichenfolgen unterstützt Weitere häufig verwendete Inhaltsattribute sind uri und counter. Was ich heute vorstellen möchte, ist conter (Zähler).
Zähler in CSS ähneln Variablen. Sie können einfache Zählfunktionen implementieren und die Ergebnisse auf der Seite anzeigen. Sie werden häufig auf frühen Websites verwendet. Um einen Zähler zu implementieren, müssen Sie die folgenden Attribute verwenden:
Werfen wir einen Blick darauf, wie Zähler in CSS verwendet werden.
1. Verwenden Sie Zähler für die automatische Nummerierung
CSS-Zähler erhöhen Variablen gemäß Regeln.
CSS-Zähler verwenden die folgenden Eigenschaften:
(1) counter-reset:name1 name2 erstellt oder setzt einen Zähler zurück (mehrere Zähler können gleichzeitig definiert werden, getrennt durch Leerzeichen)
(2) Counter-Inkrement: Name der Schrittinkrementvariable (kann eine oder mehrere erhöhen)
(3) content:counter(name) fügt den generierten Inhalt ein (unter Verwendung von Pseudoelementen davor/nachher)
(4) Die Funktion counter() oder counters() fügt dem Element den Zählerwert hinzu
Beim Erstellen eines Zählers muss dieser im vorherigen Tag oder im übergeordneten Tag des Tags erstellt werden. Wenn er in einem eigenen Tag definiert ist, ist er ungültig.
Spezifische Anwendungen:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Dotcpp-Programmierung</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: before{/*Legen Sie zuerst die Schrittgröße fest*/counter-increment:counter11;content:'th'counter(count er1)'section';}p::before{/*Stellen Sie zuerst die Schrittgröße ein*/counter-increment:counter21;content:'The 'counter(counter1)' section';}</style></he ad><body><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>Laufergebnisse:
2. Zähler initialisieren
Um einen Zähler zu verwenden, müssen Sie zunächst das Attribut zum Zurücksetzen des Zählers verwenden, um einen Zähler zu erstellen. Dieser Vorgang wird als Initialisieren des Zählers bezeichnet. Das Syntaxformat des Counter-Reset-Attributs lautet wie folgt:
Zähler-Reset: keine|[<Bezeichner><Ganzzahl>]
Die Parameterbeschreibung lautet wie folgt:
(1) keine: Zurücksetzen des Zählers verhindern;
(2) <Bezeichner>: Definieren Sie den Namen des Zählers.
(3) <integer>: Definieren Sie den Startwert des Zählers. Der Standardwert ist 0 und kann ein negativer Wert sein.
3. Zähler erhöht sich automatisch
Nach der Initialisierung des Zählers können Sie mit dem Attribut counter-increment angeben, wann der Zähler erhöht wird. Die Syntax lautet wie folgt:
Zählerinkrement: keine|[<Bezeichner><Ganzzahl>]
Die Parameterbeschreibung lautet wie folgt:
(1) keine: Verhindern Sie, dass der Zähler erhöht wird.
(2) <Bezeichner>: Definieren Sie den Namen des Zählers, der erhöht werden soll.
(3) <Ganzzahl>: Definieren Sie den Wert, den der Zähler jedes Mal erhöht. Der Standardwert ist 1 und kann ein negativer Wert sein.
4. Zähler anzeigen
Abschließend erfahren Sie, wie Sie den Zähler anzeigen. Um einen Zähler anzuzeigen, können Sie die Funktion counter() oder counters() verwenden. Die Syntax dieser beiden Funktionen ist wie folgt:
counter(name)counters(name,string,list-style-type)
Die Parameterbeschreibung lautet wie folgt:
(1) Name: der Name des Zählers;
(2) Zeichenfolge: Zeichenfolge, die zum Spleißen verwendet wird, wenn Zähler verschachtelt verwendet werden;
(3) Listenstiltyp: Der vom Zähler angezeigte Stil kann ein beliebiger Wert des in CSS zulässigen „Listenstiltyp-Attributs“ sein.
Im Folgenden wird anhand eines einfachen Beispiels die Verwendung von Zählern demonstriert:
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- increment:section;}h5:before{content:Chaptercounter(chapter).; }h6:before{content:counter(chapter).counter(section);</style></head><body><h5>Kapitel 1</h5><h6>Abschnitt 1</h6>< h6> NEIN. Abschnitt 2</h6><h6>Abschnitt 3</h6><h6>Abschnitt 4</h6><h5>Kapitel 2</h5><h6>Abschnitt 1</h6><h6>Kapitel Abschnitt 2</ h6><h6>Abschnitt 3</h6><h6>Abschnitt 4</h6></body></html>Laufergebnisse:
5. Gegenverschachtelung
Darüber hinaus können Zähler auch verschachtelt werden, und mit der Funktion counters() kann eine Zeichenfolge zwischen verschachtelten Zählern auf verschiedenen Ebenen eingefügt werden, wie im folgenden Beispiel gezeigt:
<!DOCTYPEhtml><html><head><style>ol{/*Erstellen Sie eine neue Zählerinstanz für jedes OL-Element*/counter-reset:ol-list;list-style-type:none;}li:before{ / *Erhöhen Sie nur die aktuelle Instanz des Zählers*/counter-increment:ol-list;/*Erhöhen Sie die durch „.“ getrennten Werte für alle Zählerinstanzen*/content:counters(ol-list,.),;} < /style></head><body><ol><li>Volumen</li><li>Kapitel<ol><li>Abschnitt</li><li>Abschnitt</li><li>Abschnitt<ol ><li>Abschnitt</li><li>Abschnitt</li></ol></l i><li>Abschnitt<ol><li>Unterabschnitt</li><li>Unterabschnitt</li><li>Unterabschnitt</li></ol></li></ol></li>< li>Kapitel</li><li>Kapitel</li></ol></body></html>Laufergebnisse:
