Zusammenfassung des CSS-Zählers und des Inhalts

Die Inhaltseigenschaft wurde bereits in CSS 2.1 eingeführt und Sie können die Pseudoelemente :before und :after verwenden, um Inhalte zu generieren. Das Inhaltsattribut wird mittlerweile von den meisten Browsern unterstützt. Weitere Informationen zur Inhaltsattributunterstützung finden Sie auf caniuse.com. Hier ist der aktuelle Supportstatus:

Das Inhaltsattribut wird am häufigsten mit :before oder :after verwendet, um Inhalt zu generieren. Standardmäßig ist das beanspruchte Element ein Inline-Element:

Der Zweck des obigen Codes besteht darin, den Inhalt vor und nach dem Inhalt des Div mit dem Klassennamen „test“ hinzuzufügen. Nach dem Inhalt können auch andere Stile festgelegt werden. Dabei entspricht der Inhalt dem Aktivierungszeichen des Pseudoelements und ist unverzichtbar.

div.test:vorher{
    Inhalt: „Ich bin vor div“; 
}
div.test:nach{
     Inhalt: „Ich stehe hinter dem Div“;
}

Zusätzlich zur Verwendung von Textwerten kann der Wert des Inhaltsattributs über die Methode attr () auch die Attributwerte anderer Tags verwenden:

ein.test:nach{
    Inhalt: attr(href);
}

<a class="test" href="http://www.taobao.com/">Willkommen bei</a>

CSS-Zähler gab es schon relativ früh, aber ich habe erst vor Kurzem begonnen, sie zu verstehen. Da CSS-Zähler nur funktionieren, wenn sie mit dem Inhaltsattribut verwendet werden, und das Inhaltsattribut häufig mit den Pseudoelementen :before und :after verwendet wird, besteht eine untrennbare Beziehung zwischen Zählern, Pseudoelementen und Inhalt. Der CSS-Zähler besteht im Wesentlichen aus zwei Eigenschaften und einer Methode, nämlich:

1. Zähler zurücksetzen

Diese Eigenschaft definiert den Namen des Zählers. Es können mehrere Zähler gleichzeitig definiert werden. Bei der Definition einer Zahl stellt diese den Anfangswert dar. Der Standardwert ist 0:

div.Anzahl{
    Zähler-Reset: Zähler1 Zähler2;
}

Der obige Code definiert zwei Zähler count1 und count2, die standardmäßig zunächst auf 0 gesetzt sind.

2. Gegeninkrement

Diese Eigenschaft akzeptiert zwei Parameter. Der erste Parameter stellt den Namen des Zählers dar und der zweite den Wert jedes Inkrements. Der Standardwert ist 1.

div.count:vor{
    Zählerinkrement: count1 2;
}

Diese Codezeile definiert den einzelnen Selbstinkrementwert des Zählers count1. Zu diesem Zeitpunkt ist der Standardanfangswert des Zählers 0+2=2; wenn die Zahl 2 hier weggelassen wird, ist der Standard-Selbstinkrementwert 1 und der Anfangswert des Zählers ist 0+1=1.

3. Zähler()/Zähler()

Diese Methode ist eine Zähleraufrufmethode, die zwei Parameter erhält. Der erste Parameter ist der Zählername und der zweite der Werttyp. Machen wir zu diesem Fall eine kleine Übung:

<!doctype html>
<html>
    <Kopf>
         <meta charset="utf-8">
         <title>Zähler&Inhalt</title>
         <Stil>
                div.Zähler{
                    Rand links: 50px;
                    couter-reset: count; /* Zähleranzahl definieren */
                }
               .conter p{
                     Höhe: 40px;
                     Rand: 1px durchgezogen #ffe000;
                }
               .conter p:vor{
                     Inhalt: Zähler (Anzahl, Dezimalzahl) "." /*Rufe den Zähler auf und addiere die Zahl.*/
                     Zählerinkrement: zählen;
                }
         </Stil>
    </Kopf>
    <Text>
         <div Klasse="Zähler">
               <p>Absatz 1</p>
               <p>Absatz 2</p>
               <p>Absatz 3</p>
               <p>Absatz 4</p>
               <p>Absatz 5</p>
         </div>
    </body>
</html>

Das Endergebnis ist wie folgt:

Dies ist das Ende dieses Artikels über CSS-Zähler und Inhaltszusammenfassung. Weitere relevante CSS-Zählerinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detaillierte Erläuterung der Tabellenrückgabe- und Indexabdeckungsbeispiele in MySQL

>>: Implementierung von Diensten im Docker für den Zugriff auf Hostdienste

So installieren Sie eine virtuelle Maschine mit Windows-Diensten auf dem Mac

Zusammenfassung des CSS-Zählers und des Inhalts

So installieren Sie eine virtuelle Maschine mit Windows-Diensten auf dem Mac

Detaillierte Erläuterung des Tutorials zum Erstellen einer PHP-Umgebung für Docker

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

So laden Sie die Kamera in HTML

Implementierung der Positionierung von CSS-Unterelementen relativ zu übergeordneten Elementen

Zusammenfassung der Probleme beim Hinzufügen, Löschen, Ändern und Abfragen von MySQL-Tabellen, -Spalten und -Datenbanken

Einführung in gängige Befehle und Tastenkombinationen in Linux

Langsame MySQL-Abfrage: Langsame Abfrage aktivieren

Sicherheitseinstellungen für Windows 2016 Server

So reduzieren Sie den Speicherverbrauch und die CPU-Auslastung von Webseiten

Artikel empfehlen

Wofür wird jQuery verwendet? jQuery ist eigentlich ein js-Framework

So installieren und konfigurieren Sie den Apache-Webserver

Ubuntu öffnet Port 22

MySQL 8.0.18 verwendet Klon-Plugin, um die MGR-Implementierung neu zu erstellen

So verwenden Sie die Firewall-Iptables-Strategie zum Weiterleiten von Ports auf Linux-Servern

Webdesign-Erfahrung: 5 hervorragende Webdesign-Konzepte, vollständige Analyse (Bilder)

HTML-Formular-Tag-Tutorial (5): Textfeld-Tag

Eine kurze Analyse von SQL-Beispielen zum Auffinden nicht festgeschriebener Transaktionen in MySQL

Detaillierte Erläuterung des MySQL-Kombinationsindex und des ganz links stehenden Übereinstimmungsprinzips

Einfache Implementierung von Vue Drag & Drop

Detailliertes Tutorial zum Ändern des Root-Passworts, wenn man es in MySQL 5.7 vergessen hat

DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)

Fallstudie zur dynamischen Datenbindung von this.$set in Vue

Die perfekte Lösung für den häufig auftretenden Startfehler bei MySQL mit unzureichendem Arbeitsspeicher

Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3