Der Unterschied zwischen einem Doppelpunkt (:) und zwei Doppelpunkten (::) in CSS

Empfohlen: CSS-Video-Tutorial

Ein Doppelpunkt ist eine Pseudoklasse, zwei Doppelpunkte sind Pseudoelemente

Pseudoklassen können unabhängig von den Elementen des Dokuments Stile zugewiesen werden, und kann jedem Element zugewiesen werden, logisch ähnlich wie Klassen in der Funktion, aber sie sind vordefiniert, existieren nicht im Dokumentbaum und werden auf unterschiedliche Weise ausgedrückt, daher werden sie Pseudoklassen genannt.

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.

Pseudo-Klasse hat: :first-child , :link:, besucht, :hover:, active:focus, :lang

Pseudo-Element hat: :first-line , :first-letter, :before, :after (es sollte ein Missverständnis sein, dass :first-line, :first-letter im von Su Chen Xiaoyu zusammengestellten chinesischen CSS2.0-Handbuch als Pseudoklassen aufgeführt ist)

Zur Erinnerung: Wenn Ihre Website nur mit Webkit, Firefox, Opera und anderen Browsern kompatibel sein muss, wird die Verwendung der Doppelpunkt-Schreibmethode für Pseudoelemente empfohlen Sicherer ist die Verwendung der CSS2-Schreibmethode mit einem Doppelpunkt des Elements oder die aktuellen Eigenschaften des Elements, nicht die statischen Zeichen des Elements wie ID, Klasse und Attribute. 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. 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

:aktiv

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

:visited

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 lang

angewendet.

Pseudoelemente

Im Gegensatz zu Pseudoklassen, die auf Elemente in einem speziellen Zustand abzielen, arbeiten Pseudoelemente mit bestimmten Inhalten in den Elementen, und die Ebene, auf der sie operieren, ist eine Ebene tiefer als Pseudoklassen. Daher ist es 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.

::first-letter

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

::first-line

Der Stil des Pseudoelements wird auf die erste Zeile des Texts des Elements angewendet.

::before

Fügen Sie neuen Inhalt am Anfang des Elementinhalts hinzu.

::nachher

Fügen Sie am Ende des Elementinhalts neuen Inhalt hinzu.

::before und ::after werden oft mit CSS Inhaltsgenerierung verwendet.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierlehre! !

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen einem Doppelpunkt (:) und zwei Doppelpunkten (::) in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!