Was ist der Unterschied zwischen Pseudoklassen und Pseudoobjekten (Pseudoelementen) in CSS?

Pseudoklassen werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen; Pseudoelemente werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen. Die Wirkung von Pseudoklassen kann durch Hinzufügen tatsächlicher Klassen erreicht werden; die Wirkung von Pseudoobjekten kann durch Hinzufügen tatsächlicher Elemente erzielt werden. Einfach ausgedrückt: Ihre wesentliche Differenz schafft neue Elemente, ob abstrakt oder nicht.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Der grundlegende Unterschied zwischen Pseudoklassen und Pseudoelementen (Pseudoobjekten) besteht darin, ob sie neue Elemente erstellen.

Pseudoelement/Pseudoobjekt: Es existiert nicht im DOM-Dokument. Es ist ein virtuelles Element und erstellt ein neues Element. Stellt ein untergeordnetes Element eines Elements dar. Obwohl dieses untergeordnete Element logisch existiert, existiert es nicht tatsächlich in der Dokumentstruktur.

Pseudo-Objektauswahl

Eigenschaften
Eigenschaften

CSS-Version
Version

Vom übergeordneten Element erben
Vererbung

Beschreibung
Einführung

E:Anfangsbuchstabe/E :: first-letter

CSS3/CSS1

None

CSS2/CSS1 E:first-letter/E::first-letter Pseudoobjektselektor, legt den Stil des ersten Zeichens im Objekt fest.

E:first-line/E::first-line

CSS3/CSS1

None

CS3/CSS1-Pseudoobjektselektor E:first-line/E::first-line, legt das darin enthaltene Objekt fest Der Stil der ersten Reihe.

E:before/E::before

CSS3/CSS2

None

CSS3/CSS3 Pseudoobjektselektor E:before/E::before, wird vor dem Objekt gesetzt (gemäß der logischen Struktur des Objektbaum) Was ist passiert? Wird mit dem Inhaltsattribut verwendet. E:after/E::after. CSS3/CSS2 entsprechend der logischen Struktur des Objektbaums). Wird mit dem Inhaltsattribut

E::selection

CSS3

None

CSS3-Pseudoobjektselektor E::selection verwendet und legt die Farbe des Objekts fest, wenn es ausgewählt wird.

Pseudoklasse: Eine „Geister“-Kategorie, die logisch im DOM-Dokument vorhanden ist, aber nicht im Dokumentbaum identifiziert werden muss.

Pseudo-Klassenselektor

Eigenschaften Eigenschaften	CSS-Version Version	Vom übergeordneten Element erben Vererbung	Beschreibung Einführung
E:link	CSS1	Keine	CSS1-Pseudoklassenselektor E:link legt den Stil des Hyperlinks fest, bevor er besucht wird.
E:visited	CSS1	None	CSS1-Pseudoklassenselektor E:visited legt den Stil des Hyperlinks fest, wenn seine Linkadresse besucht wurde.
E:hover	CSS2	None	CSS2/CSS1-Pseudoklassenselektor E:hover, legt den Stil des Elements fest, wenn es mit der Maus bewegt wird.
E:aktiv	CSS2/CSS1	Keine	CSS2/CSS1 Pseudoklassenselektor E:aktiv, legt den Stil des Elements fest, wenn es vom Benutzer aktiviert wird (ein Ereignis, das zwischen Mausklick und auftritt freigeben).
E:focus	CSS2/CSS1	None	CSS2/CSS1-Pseudoklassenselektor E:focus legt den Stil des Elements fest, wenn es zum Eingabefokus wird (das Onfocus-Ereignis des Elements tritt auf).
E:lang()	CSS2	None	CSS2-Pseudoklassenselektor E:lang() gleicht E-Elemente mit einer speziellen Sprache ab.
E:not()	CSS3	None	CSS3-Pseudoklassenselektor E:not() stimmt mit Element E überein, das den s-Selektor nicht enthält.
E:root	CSS3	None	CSS3-Pseudoklassenselektor E:root, entspricht dem E-Element im Stammelement des Dokuments.
E:first-child	CSS2	None	CSS2-Pseudoklassenselektor E:first-child stimmt mit dem ersten untergeordneten Element E des übergeordneten Elements überein.
E:last-child	CSS3	None	CSS3-Pseudoklassenselektor E:last-child stimmt mit dem letzten untergeordneten Element E des übergeordneten Elements überein.
E:only-child	CSS3	None	CSS3 Beispielsweise stimmt der Selektor E:only-child mit dem einzigen untergeordneten Element E des übergeordneten Elements überein.
E:nth-child(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-child(n) stimmt mit dem n-ten untergeordneten Element E des übergeordneten Elements überein.
E:nth-last-child(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-last-child(n) stimmt mit dem n-ten untergeordneten Element E vom unteren Rand des übergeordneten Elements überein .
E:first-of-type	CSS2	None	CSS3-Pseudoklassenselektor E:first-of-type stimmt mit dem ersten Geschwisterelement E desselben Typs überein.
E:last-of-type	CSS3	None	CSS3-Pseudoklassenselektor E:last-of-type stimmt mit dem letzten Geschwisterelement E desselben Typs überein.
E:only-of-type	CSS3	None	CSS3-Pseudoklassenselektor E:only-of-type, entspricht dem einzigen Geschwisterelement E desselben Typs.
E:nth-of-type(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-of-type(n), entspricht dem n-ten Geschwisterelement desselben Typs E.
E:nth-last-of-type(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-last-of-type(n) stimmt mit dem n-ten vom letzten desselben überein Typ Geschwisterelement E.
E:empty	CSS3	None	CSS3-Pseudoklassenselektor E:empty stimmt mit Element E ohne untergeordnete Elemente (einschließlich Textknoten) überein.
E:checked	CSS3	None	CSS3-Pseudoklassenselektor E:checked stimmt mit dem ausgewählten Element E auf der Benutzeroberfläche überein. (Für Formularelemente mit dem Eingabetyp Radio und Kontrollkästchen)
E:aktiviert	CSS3	Keine	CSS3-Pseudoklassenselektor E:aktiviert entspricht dem Element E im verfügbaren Zustand auf der Benutzeroberfläche.
E:disabled	CSS3	None	CSS3-Pseudoklassenselektor E:disabled stimmt mit dem deaktivierten Element E auf der Benutzeroberfläche überein.
E:target	CSS3	None	CSS3-Pseudoklassenselektor E:target stimmt mit dem E-Element überein, auf das die entsprechende URL verweist.
@page:first	CSS2	None	CSS2-Pseudoklassenselektor @page:first legt den Stil fest, der auf der ersten Seite des Seitencontainers verwendet wird. Wird nur für @page-Regeln verwendet
@page:left	CSS2	Keine	CSS2-Pseudoklassenselektor @page:left Legt den Stil fest, der von allen Seiten verwendet wird, deren Seitencontainer sich auf der linken Seite des Bundstegs befindet . Nur für @page-Regeln
@page:right	CSS2	None	CSS2 Legt den Stil fest, der für alle Seiten verwendet wird, deren Objektselektor @page:right den Seitencontainer rechts vom Bundsteg hat. Nur für @page-Regeln

Schauen Sie sich die Beschreibung der beiden Anwendungen im W3C an:

Pseudoklasse: Wird zum Hinzufügen von Spezialeffekten zu bestimmten Selektoren verwendet
Pseudoelement: Wird zum Hinzufügen von Spezialeffekten zu bestimmten Selektoren verwendet
Tatsächlich ist es im Grunde so Ergänzen Sie die Elemente, die nicht nach Klasse, ID usw. ausgewählt werden können.

Zum Beispiel:

<div>
    <p>a</p>
    <p>b c</p>
</div>

Was wäre, wenn wir möchten, dass die Schriftfarbe des ersten p-Tags rot wird? Verwenden Sie dazu Pseudoklassen:

p:first-child {
    color: red;
}

Aber was können wir tun, wenn wir keine Pseudoklassen verwenden? Zu diesem Zeitpunkt müssen wir dem ersten p-Tag eine Klasse hinzufügen

<div>
    <p class="first-child">a</p>
    <p>b c</p>
</div>

p:first-child {
    color: red;
}

, um den gleichen Effekt zu erzielen, aber wir müssen eine weitere Klasse schreiben

Wie kann die obige Operation erreicht werden, wenn Pseudoelemente verwendet werden?

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

Wie schaffen wir das ohne Pseudoelemente?

<div>
    <p><span>a</span></p>
    <p>b c</p>
</div>

p span {
    color: red;
}

Sie können den Unterschied zwischen den beiden erkennen:

Der Pseudoklasseneffekt kann durch Hinzufügen tatsächlicher Klassen erzielt werden.

Der Pseudoelementeffekt kann durch Hinzufügen tatsächlicher Elemente erzielt werden.

Der wesentliche Unterschied Dazwischen liegt die Frage, ob durch Abstraktion neue Elemente erstellt werden " oder "::"

Da Pseudoklassen dem Hinzufügen von Klassen ähneln, können sie mehrfach vorhanden sein, während Pseudoelemente nur einmal in einem Selektor und nur am Ende erscheinen können

Verwandte Frage: Die Ähnlichkeiten und Unterschiede zwischen

:” 

而伪元素既可以使用“:”，也可以使用“::

:after/::after und :before/::before

Gleiche Punkte:

kann verwendet werden, um Pseudoklassenobjekte darzustellen und um den Inhalt vor dem festzulegen object

:before und ::before Die Schreibmethoden sind gleichwertig; :after und ::after sind gleichwertig

Der Unterschied:

:before/:after ist die Schreibmethode von Css2, ::before/:: after ist die Schreibmethode von Css3

:before/ :after hat eine bessere Kompatibilität als ::before/::after,

Es wird jedoch empfohlen, ::before/::after in der H5-Entwicklung zu verwenden

Hinweis:

Pseudoobjekte sollten zusammen mit dem Inhaltsattribut verwendet werden.

Pseudoobjekte werden nicht im DOM angezeigt, daher können sie nicht über js bedient werden. Es werden nur die Spezialeffekte von

Pseudoobjekten hinzugefügt Normalerweise muss der :hover-Pseudoklassenstil aktiviert werden

Beispiel: Wenn sich die Maus über die Spanne bewegt, fügen Sie beim Hochladen „duang“ vor span ein

<style>
span{
  background: yellow;
}
span:hover::before{
  content:"duang";
}
</style>
 
<span>222</span>

(Lernvideo-Sharing:

css-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Pseudoklassen und Pseudoobjekten (Pseudoelementen) in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!