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
Schauen Sie sich die Beschreibung der beiden Anwendungen im W3C an:Pseudoklasse: Wird zum Hinzufügen von Spezialeffekten zu bestimmten Selektoren verwendet Zum Beispiel: <div>
<p>a</p>
<p>b c</p>
</div>Nach dem Login kopieren 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;
}Nach dem Login kopieren Nach dem Login kopieren 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>Nach dem Login kopieren p:first-child {
color: red;
}Nach dem Login kopieren Nach dem Login kopieren , 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;
}Nach dem Login kopieren Wie schaffen wir das ohne Pseudoelemente? <div>
<p><span>a</span></p>
<p>b c</p>
</div>Nach dem Login kopieren p span {
color: red;
}Nach dem Login kopieren 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
而伪元素既可以使用“ 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 gleichwertigDer 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 verwendenHinweis: 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 vonPseudoobjekten 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>Nach dem Login kopieren 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!
