Zusammenfassung der allgemeinen CSS-Attribute, Pseudoelemente und Pseudoelemente

Zuvor haben wir über den ID-Selektor bzw. den Klassenselektor sowie deren Unterschiede und Verbindungen gesprochen. Lassen Sie uns gemeinsam die magischen Klassen und Pseudoelemente erkunden.

Eigentlich war ich vorher verwirrt über Pseudoklassen und Pseudoelemente. Jetzt habe ich beschlossen, ihren mysteriösen Mantel abzuziehen. Zunächst einmal: Was ist eine Pseudoklasse? Was sind Pseudoelemente?

Verständnis von Pseudoklassen und Pseudoelementen:

Offizielle Erklärung:

Pseudoklassen wurden ursprünglich verwendet, um den dynamischen Status einiger Elemente darzustellen, typischerweise häufig verwendete Links . Durch die verschiedenen Zustände (Link, Aktiv, Hover, Besucht) hat der CSS2-Standard
seinen konzeptionellen Umfang erweitert und alle „Geister“-Kategorien gemacht, die logisch existieren, aber keine Identität im Dokumentenbaum haben. Das

-Pseudoelement stellt ein Unterelement eines bestimmten Elements dar. Obwohl dieses Unterelement logisch existiert, existiert es nicht tatsächlich im Dokumentbaum, wie z. B. das Nachher, Vorher usw., das wir normalerweise verwenden .

Mein grobes Verständnis ist, dass eine Pseudoklasse eine Klasse ist, die nicht identifiziert werden muss, und ein Pseudoelement ein Element ist, das jedoch nicht im Dokumentbaum vorhanden ist.

Über die Verwendung: Pseudoklassen wird ein Doppelpunkt vorangestellt, und Pseudoelementen werden zwei Doppelpunkte vorangestellt. E:Pseudoklasse des ersten Kindes, E::Pseudoelement der ersten Zeile. Dies ist der neueste CSS3-Standard, aber in CSS2 verwendet
sowohl für „Danach“ als auch „Davor“ einen Doppelpunkt, daher muss hier jeder aufpassen. Darüber hinaus hat CSS3 auch viele Pseudoklassen erweitert, die ich hier nicht erwähnen werde. Wenn Sie interessiert sind, können Sie die Informationen selbst überprüfen.

Gemeinsame Anwendungen:
Pseudoklasse:
1.a Linkstilklicken Sie auf den Link a:hover{color:red} Mauszeiger Schrift wird rot.

2. Interlaced-Farbwechsel

• 1
• 2
• 3
• 4

ul li:nth-child(even){background-color:#ccc} oder ul li:nth-chilid(2):{background-clolor:#ccc}

Pseudoelement :
Clean Floats:
.clear{zoom:1}
.clear:after{display:block;content:'';clear:both;}

Über Pseudoklassen und Pseudo-Elemente, das ist es für den Moment. Mit Pseudo-Klassen und Pseudo-Elementen lassen sich viele interessante Effekte erzielen.

Weitere verwandte Artikel zu Pseudoelementen und häufig in CSS verwendeten Pseudoelementen finden Sie auf der chinesischen PHP-Website!