Was bedeuten ein Doppelpunkt und zwei Doppelpunkte in CSS?

Ein Doppelpunkt ist eine Pseudoklasse und zwei Doppelpunkte sind Pseudoelemente.

(Empfohlenes Lernen: CSS Quick Start)

Pseudoklassen können Stile unabhängig von den Elementen des Dokuments zuweisen und können jedem Element zugewiesen werden Logischerweise ähnelt es in seiner Funktion einer Klasse, ist jedoch vordefiniert, existiert nicht im Dokumentbaum und wird auf andere Weise ausgedrückt. Daher wird es als Pseudoklasse bezeichnet.

Der von einem Pseudoelement gesteuerte Inhalt ist derselbe wie der von einem Element gesteuerte Inhalt, aber das Pseudoelement existiert nicht im Dokumentbaum und ist kein echtes Element, daher wird es als Pseudoelement bezeichnet.

Pseudoklassen umfassen: :first-child, :link:, vistited, :hover:, active:focus, :lang

Pseudoelemente umfassen: :first-line, :first -letter , :before, :after

Der Unterschied zwischen Pseudoklasse und Pseudoelement:

Pseudoklasse

Pseudoklassen-Auswahlelement Es basiert auf dem aktuellen Status des Elements oder den aktuellen Eigenschaften des Elements und nicht auf statischen Zeichen wie der ID, der Klasse und den Attributen des Elements.

Da sich der Status dynamisch ändert, erhält ein Element möglicherweise einen Pseudoklassenstil, wenn sich der Status ändert. Daraus 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. Die Pseudoklasse

:link

wird auf nicht besuchte Links angewendet und schließt sich gegenseitig mit :visited aus. Die Pseudoklasse

:hover

wird auf das Element angewendet, über dem sich der Mauszeiger befindet. Die Pseudoklasse

:active

wird auf aktivierte Elemente wie angeklickte Links, gedrückte Schaltflächen usw. angewendet. Die

:visited

-Pseudoklasse wird auf Links angewendet, die besucht wurden, und schließt sich gegenseitig mit :link aus. Die Pseudoklasse

:focus

wird auf Elemente angewendet, die den Tastatureingabefokus haben. Die Pseudoklasse

:first-child

wird angewendet, wenn das Element zum ersten Mal auf der Seite erscheint. Die Pseudoklasse

:lang

wird auf Elemente mit der angegebenen Sprache angewendet.

Pseudoelement

Im Gegensatz zu Pseudoklassen, die auf Elemente in einem speziellen Zustand abzielen, arbeiten Pseudoelemente mit bestimmten Inhalten im Element und der Ebene, auf der es wirkt on ist relativ Pseudoklassen sind eine Ebene tiefer und daher viel weniger dynamisch als Pseudoklassen.

Tatsächlich besteht der Zweck des Entwurfs von Pseudoelementen darin, den ersten Buchstaben (Buchstaben) und die erste Zeile des Elementinhalts sowie die Vorder- oder Rückseite bestimmter Inhalte auszuwählen, was mit normalen Selektoren nicht möglich ist . Der von ihm gesteuerte Inhalt ist tatsächlich derselbe wie das Element, es handelt sich jedoch nur um eine auf dem Element basierende Abstraktion, die im Dokument nicht vorhanden ist und daher als Pseudoelement bezeichnet wird. Der Stil des Pseudoelements

::first-letter

wird auf den ersten Buchstaben des Texts des Elements angewendet. Der Stil des Pseudoelements

::first-line

wird auf die erste Zeile des Texts des Elements angewendet.

::before

Fügt neuen Inhalt am Anfang des Elementinhalts hinzu.

::after

Fügt neuen Inhalt am Ende des Elementinhalts hinzu.

::before und ::after werden häufig bei der CSS-Inhaltsgenerierung verwendet.

Das obige ist der detaillierte Inhalt vonWas bedeuten ein Doppelpunkt und zwei Doppelpunkte in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!