Heim  >  Artikel  >  Web-Frontend  >  Was ist eine Pseudoklasse in HTML?

Was ist eine Pseudoklasse in HTML?

青灯夜游
青灯夜游Original
2021-12-23 14:57:106134Durchsuche

In HTML ist eine Pseudoklasse 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 ändert sich dynamisch basierend auf dem Benutzerverhalten. Zu den häufig verwendeten Pseudoklassen gehören „:active“, „:hover“, „:link“, „:root“, „:valid“ usw.

Was ist eine Pseudoklasse in HTML?

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

Pseudo-Klasse: wird verwendet, um vorhandenen Elementen entsprechende Stile hinzuzufügen, wenn sie sich in einem bestimmten Zustand befinden (Schieben, Klicken usw.). Dieser Zustand ändert sich dynamisch basierend auf dem Benutzerverhalten.

Mein Verständnis ist: Es existiert nicht an sich. Es ist ein Zustand, der nur unter bestimmten Umständen (Schieben, Klicken) ausgelöst wird. Sie können CSS verwenden, um das Objekt in diesem Zustand zu ändern.

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.

Hä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 verbotene Element aus.

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

  • :Ziel wählt das aktuelle Ankerelement aus.

  • :first-of-type wählt das erste Element aus, das sein übergeordnetes Element erfüllt. Ein Element, das ein untergeordnetes Element ist eines bestimmten Typs

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

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

  • :nth-of-type(n) Wählt ein Element aus, das das n-te untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist -last-of-type(n) Wählen Sie ein Element eines bestimmten Typs aus, das erfüllt, dass es das vorletzte n-te Element seines übergeordneten Elements ist.

  • :only-child Wählt ein Element aus, das erfüllt, dass es das einzige untergeordnete Element von ist sein übergeordnetes Element

  • :last-child Wählt das Element aus, das erfüllt, dass es sein übergeordnetes Element ist. Das Element des letzten Elements des Elements

  • :nth-child(n) wählt das Element aus, das das n-te untergeordnete Element davon erfüllt parent element

  • :nth-last-child(n) wählt das Element aus, das das n-te untergeordnete Element seines übergeordneten Elements erfüllt. Das Element, das das n-te untergeordnete Element vom letzten

  • :empty ist, wählt die Elemente aus, die erfüllt sind keine untergeordneten Elemente

  • :im Bereich wählt die Elemente aus, die den Wert innerhalb des angegebenen Bereichs erfüllen

  • :außerhalb des Bereichs wählt den Wert aus. Elemente, die nicht im angegebenen Bereich liegen

  • :ungültig Auswählen Elemente, die den ungültigen Wert erfüllen

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

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

  • :optional wählt Formularelemente aus, die optional sind Das heißt, es gibt kein „erforderliches“ Attribut

  • :read-only wählt Formularelemente mit „readonly“ aus

  • :read-write wählt Formulare aus, die kein „readonly“-Element haben

  • :root Wählen Sie das aus Wurzelelement

  • Verwandte Empfehlungen: „

    HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist eine Pseudoklasse in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Was bedeutet HTML-DFN?Nächster Artikel:Was bedeutet HTML-DFN?