Was ist der Unterschied zwischen CSS3-Pseudoklassen und Pseudoelementen?

Unterschied: 1. Pseudoklassen werden verwendet, um vorhandenen Elementen entsprechende Stile hinzuzufügen, wenn sie sich in einem bestimmten Zustand befinden, während Pseudoelemente verwendet werden, um einige Elemente zu erstellen, die sich nicht im DOM-Baum befinden, und ihnen Stile hinzuzufügen. 2 . Pseudoelemente werden erstellt. Ein Element außerhalb des Dokumentbaums, Pseudoklassen werden nicht erstellt. 3. Pseudoelemente werden durch einen Doppelpunkt „::“ dargestellt und Pseudoklassen werden durch einen einzelnen Doppelpunkt „:“ dargestellt.

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

Was sind Pseudoklassen und Pseudoelemente?

Woran denken Sie, wenn das Wort „Pseudo“ fällt? „Fake“, „Pseudoregierung von Wang Jingwei“, „nicht existent“ ...

Pseudoklasse: Wird verwendet, um entsprechende Elemente zu vorhandenen Elementen hinzuzufügen, wenn sie sich in einem bestimmten Zustand befinden (Schieben, Klicken usw.). ) Stil, dieser Zustand ändert sich dynamisch basierend auf dem Benutzerverhalten. Nach meinem Verständnis handelt es sich um einen Zustand, der an sich nicht existiert und nur unter bestimmten Umständen (Schieben, Klicken) ausgelöst wird. Sie können CSS verwenden, um das Objekt in diesem Zustand zu ändern. Beispiel: Wenn der Benutzer mit der Maus über ein bestimmtes Element fährt, können Sie :hover verwenden, um den Status des Elements zu beschreiben. Obwohl es dem allgemeinen CSS ähnelt und Stile zu vorhandenen Elementen hinzufügen kann, kann es nur verwendet werden, wenn es sich in einem befindet Zustände, die nicht durch den DOM-Baum beschrieben werden können, fügen Stile hinzu und werden daher Pseudoklassen genannt.

Pseudoelemente: Wird verwendet, um einige Elemente zu erstellen, die sich nicht im DOM-Baum befinden, und ihnen Stile hinzuzufügen. Beispielsweise können wir :before verwenden, um Text vor einem Element hinzuzufügen und dem Text Stile hinzuzufügen. Obwohl der Benutzer den Text sehen kann, befindet er sich tatsächlich nicht im DOM-Dokument.

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 dies in der tun Es gibt zwei Möglichkeiten:

(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: Pseudo-Erstkind Klasse für das erste

Um Stile hinzuzufügen, ist das geänderte li zu diesem Zeitpunkt noch im DOM-Baum vorhanden

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


li:first-child{color:orage;}

Beispiel 2:

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

Wenn Sie Stile zum ersten Buchstaben des Absatzes hinzufügen möchten, Sie können die folgenden Methoden verwenden:

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

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


.first{color:red;}

(2) Wenn das -Element nicht erstellt wird, können wir es festlegen das P:first-letter-Pseudoelement zum

-Element hinzufügen. Zu diesem Zeitpunkt sieht es so aus, als würde ein virtuelles Span-Element erstellt und ihm ein Stil hinzugefügt, aber tatsächlich ist dies der Fall nicht im DOM vorhanden

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

p:first-letter{color:red;}

Aus dem obigen Beispiel können wir sehen: Pseudoklasse Das Operationsobjekt ist ein vorhandenes Element im Dokumentbaum, 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 (::), um Pseudoelemente darzustellen, um Pseudoklassen und Pseudoelemente zu unterscheiden. Beispielsweise verwenden Pseudoelemente wie ::before und ::after Doppelpunkte (::). :hover Verwenden Sie einen einzelnen Doppelpunkt (:) mit der Pseudoklasse :active. Mit Ausnahme einiger Browser unter IE8 unterstützen die meisten Browser die Doppelpunkt-Darstellungsmethode (::) für Pseudoelemente.

Mit Ausnahme einiger Pseudoelemente wie ::backdrop, die Doppelpunkte (::) verwenden müssen, unterstützen die meisten Pseudoelemente jedoch das Schreiben mit einem Doppelpunkt und einem Doppelpunkt. Beispiel::after kann normal ausgeführt werden, wenn geschrieben als:nachher.

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, vorerst weiterhin die Schreibmethode mit einem Doppelpunkt zu verwenden.

Häufig verwendete Pseudoklassen sind:

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

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

:link wählt das aus nicht besuchtes Element (entspricht dem angegebenen Status)

:visited wählt das Element aus, das besucht wurde (entspricht dem angegebenen Status)

:first-child wählt das Element aus, das das erste untergeordnete Element seines übergeordneten Elements ist

:lang(value ) wählt das Element aus. Geben Sie das Element mit dem lang-Attribut an.

:focus Wählt das Element mit dem Tastatureingabefokus aus.

:enable. Wählt jedes aktivierte Element aus.

:disable. Wählt jedes deaktivierte Element aus.

:checked. Wählt jedes ausgewählte Element aus.

: target wählt das aktuelle Ankerelement aus

:first-of-type wählt das Element aus, das das erste untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist

:last-of-type wählt das Element aus, das das letzte Element seines übergeordneten Elements erfüllt element Ein Element eines bestimmten Typs eines untergeordneten Elements

:only-of-type Wählt ein Element aus, das das einzige untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist

:nth-of-type(n) Wählt ein Element aus, das erfüllt das n-te Element seines übergeordneten Elements. Ein Element eines bestimmten Typs von untergeordnetem Element

:nth-last-of-type(n) wählt ein Element eines bestimmten Typs aus, das das n-te Element seines übergeordneten Elements erfüllt

:nur -child wählt ein Element aus, das die Bedingung erfüllt, dass es das einzige untergeordnete Element seines übergeordneten Elements ist. Elemente von Elementen

:last-child wählt das Element aus, 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ählen Sie Elemente aus, die das n-te untergeordnete Element vom letzten bis zum letzten ihres übergeordneten Elements sind.

:empty. Wählen Sie Elemente aus, die keine untergeordneten Elemente haben. Bereich Wert auswählen Elemente, die nicht innerhalb des angegebenen Bereichs liegen

:ungültig Wählen Sie Elemente aus, die den Wert von ungültiger Wert erfüllen

:gültig Wählen Sie Elemente aus, die den Wert von gültiger Wert erfüllen

:nicht(Selektor) Wählen Sie Elemente aus, die nicht erfüllen Selektor

:optional Als verfügbare Optionsformularelemente auswählen, d. h. es gibt kein „erforderliches“ Attribut

:schreibgeschützt Formularelemente mit „schreibgeschützt“ auswählen

:schreibgeschützt Formularelemente ohne „schreibgeschützt“ auswählen

:root Stammelemente auswählen

Häufig verwendetes Pseudoelement

::first-letter wählt das erste Wort des angegebenen Elements aus ::first-line wählt die erste Zeile des angegebenen Elements aus

::after fügt Inhalt ein vor dem Inhalt des angegebenen Elements

::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 ist der Unterschied zwischen CSS3-Pseudoklassen und Pseudoelementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!