Über die Unterschiede und Vorsichtsmaßnahmen zwischen Pseudoklassen und Pseudoelementen in CSS3

Die Konzepte von Pseudoklassen und Pseudoelementen in CSS können leicht verwechselt werden

Heute sprechen wir über den Unterschied zwischen Pseudoklassen und Pseudoelementen

---

Definition

Werfen wir zunächst einen Blick auf die Definitionen von Pseudoklassen und Pseudoelementen
w3cerklärt sie auf diese Weise

• Pseudoklasse: Wird zum Hinzufügen von Spezialeffekten zu bestimmten Selektoren verwendet.

• Pseudoelement: Wird zum Hinzufügen von Spezialeffekten zu bestimmten Selektoren verwendet.

Um ehrlich zu sein, vielleicht ist mein Chinesisch nicht gut, ich denke, diese beiden Sätze sind gleichwertig :-)
Ich kann überhaupt keinen Unterschied erkennen
Beide fügen einigen Selektoren „add“ hinzu. Stunt „

Der Standard hat einen solchen Satz, der wie folgt übersetzt wird

CSS führt die Konzepte von Pseudoklasse und Pseudoelement ein, um sie umzusetzen Das auf Formatierung von Informationen außerhalb des Baums

basierende Dokument ist abstrakter. Tatsächlich bedeutet es zusätzliche Elemente, die wir nicht über Klasse auswählen können usw.

Unterschied

Wir brauchen ein Beispiel, um diesen Unterschied zu verstehen

<p>
    <em>This</em>
    <em>is a text</em></p>

Was wäre, wenn wir die Schriftfarbe von Das erste EM-Tag wird rot. Wie es geht
Es ist einfach, die bekannten Pseudoklassen zu verwenden

em:first-child {    color: red;}

Aber was machen wir, wenn es keine gibt Pseudoklassen?
Das müssen wir tun. Der gleiche Effekt kann durch Hinzufügen der Klasse

<p>
    <em class="first-child">This</em>
    <em>is a text</em></p>

em.first-child {    color: red;}

zum ersten em-Tag

---

<p>
    <em>This</em>
    <em>is a text</em></p>

erzielt werden

Noch dieses Beispiel
Jetzt möchte ich den Absatz „Wie man einen Buchstaben rot färbt“

Dieses Mal müssen wir Pseudoelemente verwenden

p::first-letter {    color: red;}

Gehen wir ebenfalls davon aus, dass es keine Pseudoelemente gibt
Zu diesem Zeitpunkt können wir nur Span-Tags verschachteln, um

<p>
    <em><span>T</span>his</em>
    <em>is a text</em></p>

p span {    color: red;}

---

Da ich das sehe, glaube ich, dass jeder verstanden hat, warum Eine wird als Pseudoklasse und die andere als Pseudoelement bezeichnet.
Pseudoklasse Der Effekt kann durch Hinzufügen tatsächlicher Klassen erzielt werden.
Der Effekt von Pseudoelementen kann durch Hinzufügen tatsächlicher Elemente erzielt werden.
Ihre Der wesentliche Unterschied besteht darin, ob Abstraktion neue Elemente erstellt

Geschichte

Pseudoklassen wurden ursprünglich verwendet, um die Dynamik von Elementen darzustellen (typische Anker-Pseudoklassen Link, Visited, Hover). , aktiv)
Es wurde im CSS2-Standard erweitert, sodass Logik vorhanden ist, aber nicht im DOM-Baum identifiziert werden muss.
Pseudoelemente stellen untergeordnete Elemente eines bestimmten Elements dar. Obwohl Logik vorhanden ist, existiert sie nicht im DOM-Baum

Obwohl ihre Konzepte von uns leicht verwechselt werden
Aber es hat keinen Einfluss auf unsere normale Verwendung

Ich sagte in der Einführung und Zusammenfassung der Verwendung von CSS3-Selektoren
Pseudo Klassen können nur „:“ verwenden
Und Pseudoelemente können „:“ verwenden, Sie können auch „::“ verwenden
Hier werde ich erklären, warum

---

Der Standard in CSS3 ist das Pseudoklassen verwenden einen einzelnen Doppelpunkt „:“
, während Pseudoelemente einen Doppelpunkt „: :“ verwenden (um Verwirrung zu vermeiden)
Davor verwendeten jedoch sowohl Pseudoklassen als auch Pseudoelemente einen einzelnen Doppelpunkt „ :"
Um die Kompatibilität mit Pseudoelementen sicherzustellen, sind also beide Verwendungsmethoden möglich
Aber die niedrigere Version des IE weist ein Kompatibilitätsproblem mit Doppelpunkten auf
, sodass Leute, die früher Stile geschrieben haben, einfach Singles verwendet haben Doppelpunkte für Pseudoklassen und Pseudoelemente
, wodurch diese Verwirrung anhält

Hinweis

Bei der Verwendung von Pseudoklassen und Pseudoelementen
Eine Sache, auf die man besonders achten sollte, ist
Pseudoklassen sind genau wie echte Klassen und können in Kombination verwendet werden
Es gibt keine Obergrenze für die Anzahl, solange sie sich nicht gegenseitig ausschließen
Zum Beispiel: 🎜>

em:first-child:hover {    color: red;}

Das ist völlig okay

Aber beachten Sie, dass hier die Beziehung zwischen „und“ ist
Das heißt, es muss sowohl das erste untergeordnete Element „erstes Kind“
als auch das

---

erfüllen Pseudo-Element ist viel strenger, wenn es um die „Hover“-Cursor-Aufhängung geht

Das Pseudo-Element kann nur einmal in einem Selektor und nur am Ende erscheinen (Einige Schüler haben das falsch verstanden hier, also habe ich Änderungen vorgenommen)
Die folgenden Stile werden nicht wirksam

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
    color: red;}

p::first-letter::selection {  /*错误的写法：伪元素出现了多个*/
    color: red;}

---

Lassen Sie mich noch etwas dazu sagen

Priorität Bei der Berechnung von Gewichten
Pseudoklassen haben die gleiche Priorität wie Klassen
Pseudoelemente haben die gleiche Priorität wie Tags

Zusammenfassung

• Pseudoklassen und Pseudo Elemente werden beide verwendet, um Selektoren Spezialeffekte hinzuzufügen

• Der wesentliche Unterschied zwischen Pseudoklassen und Pseudoelementen besteht darin, ob durch Abstraktion neue Elemente erstellt werden

• Pseudo -Klassen können überlagert werden, solange sie sich nicht gegenseitig ausschließen

• Pseudoelemente können nur einmal in einem Selektor und nur am Ende erscheinen

• Die Priorität von Pseudoklasse und Pseudoelement ist dieselbe wie die Priorität von Klasse bzw. Tag

Das obige ist der detaillierte Inhalt vonÜber die Unterschiede und Vorsichtsmaßnahmen zwischen Pseudoklassen und Pseudoelementen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!