Was bedeuten CSS3-Pseudoklassen und Pseudoelemente?

In CSS3 ist Pseudo-Klasse ein Selektor, der dazu verwendet wird, entsprechende Stile zu vorhandenen Elementen hinzuzufügen, wenn sie sich in einem bestimmten Zustand befinden, und dieser Zustand ändert sich dynamisch basierend auf dem Benutzerverhalten, während Pseudo-Element „falsch“ „Element“ oder „“ bedeutet; „Camouflageelement“ ist ein Selektor, der zum Erstellen und Stylen von Elementen verwendet wird, die sich nicht im DOM-Baum befinden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist eine Pseudoklasse?

Pseudoklasse ist ein Selektor, der zum Hinzufügen entsprechender Stile zu vorhandenen Elementen verwendet wird, wenn diese sich in einem bestimmten Zustand befinden (Schieben, Klicken usw.), und dieser Zustand basiert auf das Benutzerverhalten und dynamische Änderungen.

Zum Beispiel: Wenn der Benutzer mit der Maus über ein bestimmtes Element fährt, können Sie :hover verwenden, um den Zustand dieses Elements zu beschreiben. Obwohl es dem allgemeinen CSS ähnelt und Stile zu vorhandenen Elementen hinzufügen kann, kann es nur in einem Zustand sein, in dem es sich befindet können nicht durch den DOM-Baum beschrieben werden. Nur auf diese Weise können Sie Stile zu Elementen hinzufügen, daher werden sie Pseudoklassen genannt.

Was sind Pseudoelemente?

PseudoelementeDas einfache Verständnis ist „falsche Elemente“ oder „Verkleidungselemente“. Tatsächlich kann es so verstanden werden: Pseudoelemente sind tatsächlich virtuelle Elemente, die nicht existieren (in Codeform), und Sie können sie nicht im Dokument finden, also sind Pseudoelemente virtuelle Elemente.

Pseudoelement ist ein Selektor, der verwendet wird, um einige Elemente zu erstellen, die sich nicht im DOM-Baum befinden, und ihnen Stile hinzuzufügen.

Mit Pseudoelementen können Sie Stile für bestimmte Teile des ausgewählten Elements definieren, ohne auf die ID oder Klassenattribute des Elements zurückgreifen zu müssen. Mithilfe von Pseudoelementen können Sie beispielsweise den Stil des ersten Buchstabens in einem Absatz festlegen oder Inhalte vor oder nach dem Element einfügen usw.

Der Unterschied zwischen Pseudoklassen und Pseudoelementen:

Bitte sehen Sie sich das folgende Beispiel an:

Beispiel 1:

<ul>
  <li>第一列</li>
  <li>第二列</li>
</ul>

Wenn wir der ersten Spalte Stil hinzufügen möchten, können wir das tun auf die folgenden zwei Arten:

(1) Fügen Sie der ersten Spalte eine Klasse hinzu und definieren Sie den Stil in der Klasse:

<ul>
  <li class="first-item">第一列</li> 
  <li>第二列</li></ul>
</ul>

.first-item{color:orange;}

(2) Wenn keine Notwendigkeit besteht, eine Klasse hinzuzufügen, können wir Folgendes festlegen: first-child to die erste 25edfb22a4f469ecb59f1190150159c6-Pseudoklasse, die Stile hinzufügt. Zu diesem Zeitpunkt ist das geänderte li noch im DOM-Baum vorhanden Absatz können Sie die folgenden Methoden verwenden:

(1) Wickeln Sie das 45a2772a6b6107b401db3c9b82c049c2-Element in den ersten Buchstaben ein und legen Sie den Stil für span fest:

<ul>
  <li>第一个</li>
  <li>第二个</li>
</ul>

li:first-child{color:orage;}

(2) Wenn das 45a2772a6b6107b401db3c9b82c049c2-Element nicht erstellt wird kann P:first auf das e388a4556c0f65e1904146cc1a846bee-Element setzen. Das -letter-Pseudoelement fügt Stile hinzu. Zu diesem Zeitpunkt sieht es so aus, als würde ein virtuelles Span-Element erstellt und Stile hinzugefügt, aber tatsächlich ist dies bei diesem Span-Element der Fall nicht im DOM vorhanden.

<p>Hello World, and wish you have a good day!</p>

<p>
  <span class="first">H</span>ello World, and wish you have a good day!
</p>

Aus dem obigen Beispiel können wir erkennen: Das Operationsobjekt der Pseudoklasse ist ein Element, das bereits im Dokumentbaum vorhanden ist, während das Pseudoelement ein Element außerhalb des Dokumentbaums erstellt. Daher besteht der Unterschied zwischen Pseudoklassen und Pseudoelementen darin, ob ein Element außerhalb des Dokumentbaums erstellt wird oder nicht.

Einen Doppelpunkt oder Doppelpunkt für Pseudoelemente verwenden?

css3-Spezifikation erfordert die Verwendung von Doppelpunkten (::) zur Darstellung von Pseudoelementen, um Pseudoklassen und Pseudoelemente wie zum Beispiel ::before und zu unterscheiden ::after verwenden doppelte Doppelpunkte (::), :hover und :active Pseudoklassen verwenden einen einzelnen Doppelpunkt (:). Mit Ausnahme einiger Browser vor IE8 unterstützen die meisten Browser die Doppelpunkt-Darstellungsmethode (<code>::) für Pseudoelemente. Aber mit Ausnahme einiger Pseudoelemente wie ::backdrop, die doppelte Doppelpunkte (::) verwenden müssen, unterstützen die meisten Pseudoelemente das Schreiben mit einem Doppelpunkt und einem Doppelpunkt, wie zum Beispiel: :after, geschrieben als :after, kann auch normal ausgeführt werden. Der w3c-Standard besagt, dass der CSS3-Standard zwar erfordert, dass Pseudoelemente mit Doppelpunkten geschrieben werden, das Schreiben mit einem Doppelpunkt jedoch weiterhin unterstützt wird. Aus Gründen der Abwärtskompatibilität empfehlen wir Ihnen, vorerst weiterhin die Schreibmethode mit einem Doppelpunkt zu verwenden.

::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而除了少部分伪元素如::backdrop必须使用双冒号（::），大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:afterHäufig verwendete Pseudoklassen sind:

:active wählt das Element aus, das aktiviert wird (entspricht dem angegebenen Zustand)

• :hover wählt das Element aus, über das sich die Maus bewegt (entspricht dem angegebenen Zustand)

• :link Wählen Sie Elemente aus, die nicht besucht wurden (entsprechen dem angegebenen Status)

• :visited Wählen Sie Elemente aus, die besucht wurden (entsprechen dem angegebenen Status)

• :first-child Wählen Sie das Element aus, das das erste ist untergeordnetes Element seines übergeordneten Elements

• :lang(value) Wählt Elemente mit dem angegebenen lang-Attribut aus

• :focus Wählt Elemente mit Tastatureingabefokus aus

• :enable Wählt jedes aktivierte Element aus

• :disable Wählen Sie jedes gesperrte Element aus.

• :markiert wählt jedes ausgewählte Element aus.

• :Ziel wählt das aktuelle Ankerelement aus einer bestimmten Art

• :last-of-type wählt das Element aus, das das letzte untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist.

• :only-of-type wählt das Element aus, das das einzige untergeordnete Element eines bestimmten Typs von ist sein übergeordnetes Element

• :nth-of-type(n) Wählt das Element aus, das das n-te untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist

• :nth-last-of-type(n) Wählt das aus Element, das das n-te untergeordnete Element seines übergeordneten Elements ist. Das vorletzte n-Element eines bestimmten Typs

• :only-child wählt das Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist

• :last-child wählt das aus Element, das das letzte Element seines übergeordneten Elements ist

• :nth-child(n) Wählt das Element aus, das das n-te untergeordnete Element seines übergeordneten Elements ist

• :nth-last-child(n) Wählt das Element aus das ist das vorletzte n-te untergeordnete Element seines übergeordneten Elements

• :empty Wählt Elemente aus, die keine untergeordneten Elemente haben

• :in-range Wählt Elemente aus, deren Wert innerhalb des angegebenen Bereichs liegt

• :out-of- Bereich Wählt Elemente aus, deren Wert nicht innerhalb des angegebenen Bereichs liegt Selektor

• :optional Auswählen ist verfügbar Das Formularelement der Option, d. write Wählen Sie das Formularelement ohne „readonly“ aus

• :root select Root element

• Häufig verwendete Pseudoelemente
::first-letter wählt das erste Wort des angegebenen Elements aus
::first-line wählt die erste Zeile des angegebenen Elements aus
:: after Inhalt vor dem Inhalt des angegebenen Elements einfügen
::before Inhalt nach dem Inhalt des angegebenen Elements einfügen

: :selection Wählen Sie den vom Benutzer ausgewählten Inhalt im angegebenen Element aus

• (Freigabe von Lernvideos:

  CSS-Video-Tutorial
)

Das obige ist der detaillierte Inhalt vonWas bedeuten CSS3-Pseudoklassen und Pseudoelemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!