Die Konzepte von Pseudoklassen und Pseudoelementen in CSS können leicht verwechselt werden
Heute sprechen wir über den Unterschied zwischen Pseudoklassen und Pseudoelementen
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.
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>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
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
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;}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
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;}Priorität Bei der Berechnung von Gewichten
Pseudoklassen haben die gleiche Priorität wie Klassen
Pseudoelemente haben die gleiche Priorität wie Tags
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!
