Was sind die CSS-Pseudoklassen?

CSS-Pseudoklassen umfassen: „:link“, „:visited“, „:hover“, „:active“, „:focus“, „:lang()“, „not()“, „:root“ , „:first-child“, „:last-child“, „:empty“ usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

CSS-Pseudoklassen werden verwendet, um einige Spezialeffekte von Selektoren hinzuzufügen. Sie werden verwendet, um vorhandenen Elementen entsprechende Stile hinzuzufügen, wenn sie sich in einem bestimmten Zustand befinden.

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.

Es fühlt sich an, als ob Pseudoklassen dynamisch sein können und ein Element eine Pseudoklasse gewinnen oder verlieren kann, wenn der Benutzer mit dem Dokument interagiert. Die Ausnahmen sind „:first-child“, das aus dem Dokumentbaum abgeleitet werden kann, und „:lang“, das in einigen Fällen auch aus dem Dokumentbaum abgeleitet werden kann.

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.

CSS-Pseudoklassenauswahlliste

Eigenschaften Eigenschaften	CSS-Version Version	Vom übergeordneten Element erben Vererbung	Beschreibung Einführung
E:link	CSS1	Keine	CSS1-Pseudoklassenselektor E: Link , legt den Stil des Hyperlinks fest, bevor dieser aufgerufen wird.
E:visited	CSS1	None	CSS1-Pseudoklassenselektor E:visited legt den Stil des Hyperlinks fest, wenn seine Linkadresse besucht wurde.
E:hover	CSS2	None	CSS2/CSS1-Pseudoklassenselektor E:hover, legt den Stil des Elements fest, wenn es mit der Maus bewegt wird.
E:aktiv	CSS2/CSS1	Keine	CSS2/CSS1 Pseudoklassenselektor E:aktiv, legt den Stil des Elements fest, wenn es vom Benutzer aktiviert wird (ein Ereignis, das zwischen Mausklick und auftritt freigeben).
E:focus	CSS2/CSS1	None	CSS2/CSS1-Pseudoklassenselektor E:focus legt den Stil des Elements fest, wenn es zum Eingabefokus wird (das Onfocus-Ereignis des Elements tritt auf).
E:lang()	CSS2	None	CSS2-Pseudoklassenselektor E:lang() gleicht E-Elemente mit einer speziellen Sprache ab.
E:not()	CSS3	None	CSS3-Pseudoklassenselektor E:not() stimmt mit Element E überein, das den s-Selektor nicht enthält.
E:root	CSS3	None	CSS3-Pseudoklassenselektor E:root, entspricht dem E-Element im Stammelement des Dokuments.
E:first-child	CSS2	None	CSS2-Pseudoklassenselektor E:first-child stimmt mit dem ersten untergeordneten Element E des übergeordneten Elements überein.
E:last-child	CSS3	None	CSS3-Pseudoklassenselektor E:last-child stimmt mit dem letzten untergeordneten Element E des übergeordneten Elements überein.
E:only-child	CSS3	None	CSS3 Beispielsweise stimmt der Selektor E:only-child mit dem einzigen untergeordneten Element E des übergeordneten Elements überein.
E:nth-child(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-child(n) stimmt mit dem n-ten untergeordneten Element E des übergeordneten Elements überein.
E:nth-last-child(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-last-child(n) stimmt mit dem n-ten untergeordneten Element E vom unteren Rand des übergeordneten Elements überein .
E:first-of-type	CSS2	None	CSS3-Pseudoklassenselektor E:first-of-type stimmt mit dem ersten Geschwisterelement E desselben Typs überein.
E:last-of-type	CSS3	None	CSS3-Pseudoklassenselektor E:last-of-type stimmt mit dem letzten Geschwisterelement E desselben Typs überein.
E:only-of-type	CSS3	None	CSS3-Pseudoklassenselektor E:only-of-type, entspricht dem einzigen Geschwisterelement E desselben Typs.
E:nth-of-type(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-of-type(n), entspricht dem n-ten Geschwisterelement desselben Typs E.
E:nth-last-of-type(n)	CSS3	None	CSS3-Pseudoklassenselektor E:nth-last-of-type(n) stimmt mit dem n-ten vom letzten desselben überein Typ Geschwisterelement E.
E:empty	CSS3	None	CSS3-Pseudoklassenselektor E:empty stimmt mit Element E ohne untergeordnete Elemente (einschließlich Textknoten) überein.
E:checked	CSS3	None	CSS3-Pseudoklassenselektor E:checked stimmt mit dem ausgewählten Element E auf der Benutzeroberfläche überein. (Für Formularelemente mit dem Eingabetyp Radio und Kontrollkästchen)
E:aktiviert	CSS3	Keine	CSS3-Pseudoklassenselektor E:aktiviert entspricht dem Element E im verfügbaren Zustand auf der Benutzeroberfläche.
E:disabled	CSS3	None	CSS3-Pseudoklassenselektor E:disabled stimmt mit dem deaktivierten Element E auf der Benutzeroberfläche überein.
E:target	CSS3	None	CSS3-Pseudoklassenselektor E:target stimmt mit dem E-Element überein, auf das die entsprechende URL verweist.
@page:first	CSS2	None	CSS2-Pseudoklassenselektor @page:first legt den Stil fest, der auf der ersten Seite des Seitencontainers verwendet wird. Wird nur für @page-Regeln verwendet
@page:left	CSS2	Keine	CSS2-Pseudoklassenselektor @page:left Legt den Stil fest, der von allen Seiten verwendet wird, deren Seitencontainer sich auf der linken Seite des Bundstegs befindet . Nur für @page-Regeln
@page:right	CSS2	None	CSS2 Legt den Stil fest, der für alle Seiten verwendet wird, deren Objektselektor @page:right den Seitencontainer rechts vom Bundsteg hat. Nur für @page-Regeln

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Pseudoklassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!