Zusammenfassung des CSS-Zählers und des Inhalts

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

Artikel empfehlen

So zeigen Sie historische Befehle in Linux an und führen sie aus

Historische Befehle anzeigen und bestimmte Befehl...

Detaillierte Erläuterung von MySQL zum Abrufen statistischer Daten für jeden Tag und jede Stunde eines bestimmten Zeitraums

Erhalten Sie tägliche Statistiken Wenn Sie ein Pr...

Detaillierte Schritte zur Installation von RabbitMQ im Docker

Inhaltsverzeichnis 1. Finde den Spiegel 2. Laden ...

Lernen Sie die Vue-Middleware-Pipeline in einem Artikel kennen

Beim Erstellen eines SPA müssen Sie häufig bestim...

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Inhaltsverzeichnis Einführung Herunterladen und i...

HTML-Tutorial: Das Optgroup-Element verstehen

Wählen Sie die Kategorieauswahl. Nach Tests könne...

VMWare15 installiert Mac OS-System (grafisches Tutorial)

Installationsumgebung Windows 10 VMware Workstati...

So verwenden Sie das Name-Attribut und das ID-Attribut des A-Tags, um innerhalb der Seite zu springen

Früher wusste ich nur, wie ich zum Springen das Na...

Tutorial-Diagramm zum Erstellen eines Hadoop-Hochverfügbarkeitsclusters basierend auf ZooKeeper

Inhaltsverzeichnis 1. Einführung in Hochverfügbar...

Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify

Inhaltsverzeichnis JSON.parse JSON.parse-Syntax R...

HTML+jQuery zur Implementierung einer einfachen Anmeldeseite

Inhaltsverzeichnis Einführung Öffentlicher Code (...

JS implementiert das Schere-Stein-Papier-Spiel

In diesem Artikelbeispiel wird der spezifische JS...

Informationen zur Installationsmethode für MySQL 8.0.13-ZIP-Pakete

MySQL 8.0.13 verfügt standardmäßig über einen Dat...

So geben Sie Flash-Seiten über Überprüfungsmethoden in Website-Standards frei

1. Embed ist illegal Das <embed>-Tag ist ein...

Detaillierte Erklärung zur Verwendung der JavaScript-Paging-Komponente

Die Paginierungskomponente ist eine häufige Kompo...