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!
