Heim >Web-Frontend >CSS-Tutorial >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!