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

Das Balkendiagramm von Vue + Echart realisiert Statistiken zu Epidemiedaten

MySQL-Abfrage doppelter Daten (löschen Sie doppelte Daten und behalten Sie die Daten mit der kleinsten ID als einzige Daten)

Entwicklungshintergrund: Ich arbeite derzeit an e...

Zusammenfassung des CSS-Zählers und des Inhalts

Das Balkendiagramm von Vue + Echart realisiert Statistiken zu Epidemiedaten

Detaillierte Interpretation der Datei /etc/fstab im Linux-System

Einführung in die Installation von JDK unter Linux, einschließlich der Deinstallation von OpenJDK

Detaillierte Erklärung der 14 gängigen HTTP-Statuscodes, die vom Server zurückgegeben werden

Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen

Allgemeine Befehle für MySQL-Autorisierung, Start und Dienststart

Memcached-Methode zum Erstellen eines Cache-Servers

Analysieren Sie den Unterschied zwischen den Methoden querySelector und getElementById in JavaScript

Spezifikationen für Hyperlink-Symbole: Verbessern Sie die Lesbarkeit von Artikeln

Detaillierte Erklärung zur Verwendung des <meta>-Tags in HTML

Artikel empfehlen

Eine Kurzanleitung zu MySQL-Indizes

Ein Beispiel dafür, wie Vue vierstufigen Navigations- und Verifizierungscode implementiert

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente

So installieren Sie Linux Flash

So fügen Sie die Tomcat-Serverkonfiguration zu Eclipse hinzu

5 JavaScript-Möglichkeiten zum Abflachen von Arrays

So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten

So implementieren Sie den neuen Operator von JavaScript selbst

Detaillierter Prozess zum Ändern des Hostnamens, nachdem Docker einen Container erstellt hat

Implementierungsschritte zum Erstellen eines Webpack5-React-Gerüsts von Grund auf (mit Quellcode)

MySQL-Abfrage doppelter Daten (löschen Sie doppelte Daten und behalten Sie die Daten mit der kleinsten ID als einzige Daten)

Analyse von 2 Implementierungsmethoden zum Konfigurieren der JNID-Datenquelle in Tomcatc3p0

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Detaillierte Erläuterung der ECharts-Mausereignisverarbeitungsmethode