Zusammenfassung der Unterschiede zwischen Pseudoklassen und Pseudoelementen in CSS und CSS3

Beim Erlernen von CSS kommt es besonders leicht zu einer Verwechslung zweier Konzepte: Pseudoklassen und Pseudoelemente . Die Definition von beidem in w3c lautet: CSS-Pseudoklassen werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen. CSS-Pseudoelemente werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen. Pseudoklassen wurden ursprünglich verwendet, um den dynamischen Status einiger Elemente darzustellen, typischerweise den Status von Links (LVHA). Anschließend erweiterte der CSS2-Standard seinen konzeptionellen Umfang um alle „Geister“-Kategorien, die logisch existieren, aber nicht im Dokumentbaum identifiziert werden müssen. Das Pseudoelement stellt ein untergeordnetes Element eines Elements dar. Obwohl dieses untergeordnete Element logisch existiert, existiert es tatsächlich nicht im Dokumentbaum. Lassen Sie uns über den Unterschied zwischen Pseudoklassen und Pseudoelementen in CSS und CSS3 sprechen.

Sie können zunächst kostenlose Kurse im Zusammenhang mit der chinesischen PHP-Website lernen

1. 《 CSS3 Vom Anfänger zum Meister-Tutorial》中 CSS3-Pseudoklassenselektor Kurs

2. Dark Horse CSS-Video-Tutorial für Programmierer“ in Pseudoklassen und Pseudoelemente Verwandte Video-Tutorials

Der Unterschied zwischen Pseudoklassen und Pseudoelementen

1.

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

In CSS3 ist es Standard, dass Pseudoklassen einen einzelnen Doppelpunkt „:“ und Pseudoelemente einen Doppelpunkt „::“ verwenden (aber vorher sowohl Pseudoklassen als auch Pseudoelemente). Es wird ein einzelner Doppelpunkt „:“ verwendet, um die Kompatibilität mit beiden Pseudoelementen sicherzustellen. Beide Verwendungsmethoden sind möglich.

Niedrigere Versionen des IE haben jedoch Probleme mit der Doppelpunktkompatibilität, sodass Personen, die in der Vergangenheit Stile geschrieben haben, dies einfach tun verwendete einzelne Doppelpunkte für Pseudoklassen und Pseudoelemente, was dazu führte, dass diese Verwirrung anhielt.

2.

Der Unterschied zwischen CSS-Pseudoklassen und Pseudoelementen

Der Effekt von Pseudoklassen kann durch Hinzufügen einer tatsächlichen Klasse erreicht werden, während der Effekt von Pseudoelemente müssen erreicht werden durch Dies kann nur durch Hinzufügen eines tatsächlichen Elements erreicht werden, weshalb eines von ihnen als Pseudoklasse und das andere als Pseudoelement bezeichnet wird. Der Grund, warum Pseudoelemente und Pseudoklassen so leicht zu verwechseln sind, liegt darin, dass sie ähnliche Effekte und ähnliche Schreibmethoden haben. Um die beiden zu unterscheiden, hat CSS3 jedoch klar festgelegt, dass Pseudoklassen durch eins dargestellt werden Doppelpunkt, während Pseudoelemente durch zwei Doppelpunkte ausgedrückt werden.

3.

Erklärung von Pseudoklassen und Pseudoelementen in CSS und die Unterschiede zwischen den beiden

CSS-Pseudoklassen (Pseudoklassen) sind die Bolzen von Selektoren, Wird verwendet, um den Status eines Selektors oder seiner zugehörigen Selektoren anzugeben. Ihre Form ist selector:pseudoclass{property:value;}. Verwenden Sie einfach einen englischen Doppelpunkt halber Breite (:), um den Selektor und die Pseudoklasse zu trennen.

Viele CSS-Vorschläge werden von Browsern nicht unterstützt, aber es gibt vier CSS-Pseudoklassen für Verbindungen, deren Verwendung sicher ist. Link wird für Zugangsverbindungen verwendet. besuchte wird für Verbindungen verwendet, die bereits besucht wurden. Hover wird für die Verbindung verwendet, über der sich der Mauszeiger befindet. active wird für Verbindungen verwendet, die den Fokus erhalten haben (z. B. angeklickt wurden).

4.

Beispiele für Pseudoelemente in CSS und ihre Unterschiede zu Pseudoklassen

Wir wissen, dass mit der weiteren Verbesserung der CSS-Spezifikation auch die neuen CSS-Pseudo-Elemente hinzukommen. Elemente werden immer mehr Es gibt immer mehr, aber in der täglichen Entwicklung sind diejenigen, die wir häufig verwenden und deren Browserunterstützung optimistischer ist, vorher und nachher. Aber was wir in der täglichen Entwicklung verwenden, sind: nach {content: ”;}, um Floats zu löschen und ein Element hinzuzufügen (unter Berücksichtigung der Verwendung eines einzelnen Doppelpunkts im IE8-Browser). Aber was sind die möglichen Werte von Inhalten? ?

5.

Eine Zusammenfassung gängiger CSS-Attribut-Pseudoelemente und Pseudoelemente

Pseudoklassen wurden ursprünglich verwendet, um typischerweise den dynamischen Status einiger Elemente darzustellen 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 nicht im Dokumentbaum identifiziert werden
.Das

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

6. Eine kurze Diskussion von CSS-Pseudoklassen und Pseudoelementen

Pseudoklassenauswahlelemente basieren auf dem aktuellen Status des Elements. oder der aktuelle Zustand des Elements. Es verfügt über Merkmale und nicht über statische Zeichen wie die ID, die Klasse und die Attribute des Elements. Da sich der Status dynamisch ändert, erhält ein Element möglicherweise einen Pseudoklassenstil, wenn sich der Status ändert. Es ist ersichtlich, dass seine Funktion der einer Klasse etwas ähnelt, sie jedoch auf der Abstraktion außerhalb des Dokuments basiert und daher als Pseudoklasse bezeichnet wird.

Verwandte Fragen und Antworten

1. Was ist der Unterschied zwischen Pseudoklassen und Pseudoelementen?

[Verwandte Empfehlungen]

1. Kostenloses Video-Tutorial auf der chinesischen PHP-Website:

"php.cn Dugu Jiujian (2)-CSS-Video-Tutorial"

2. Kostenloses PHP-Tutorial für die chinesische Website:

CSS 3.0-Referenzhandbuch

Das obige ist der detaillierte Inhalt vonZusammenfassung der Unterschiede zwischen Pseudoklassen und Pseudoelementen in CSS und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!