Was sind die Pseudoklassen in CSS?

CSS-Pseudoklassen: „:active“, „:any-link“, „:blank“, „:checked“, „:current“, „:first“, „:first-child“, „:future“ , „:focus“, „:has()“, „:host“ usw.

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

Pseudoklassenselektor (bezeichnet als: Pseudoklasse) wird durch einen Doppelpunkt definiert, der den Status des Elements definiert, z. B. „Klick gedrückt“, „Klick abgeschlossen“ usw. Der Stil kann für den Status des Elements durch geändert werden Pseudoklasse. CSS-Pseudoklassen werden verwendet, um Selektoren einige Spezialeffekte hinzuzufügen.

Pseudo-Klassenliste in CSS

?? :drop :leer:aktiviert:first:first-child:first-of-type:fullscreen:future:focus:focus-visible :fokus -within:has():host:host():host-context():hover:indeterminate:in-range:invalid:is() :lang():last-child:last-of-type:left:link:local-link:not():nth-child() :nth-col():nth-last-child():nth-last-col():nth-last-of-type():nth-of-type ():Einzelkind

:only-of-type	:optional	:out-of-range	:past	:placeholder-shown	:read-only
:read-write	:required	:right	:root	:scope	:target
:target-within	:user-invalid	:valid	:visited	:where()

Häufig verwendete Pseudoklassen und ihre Klassifizierungen

1. Dynamischer Pseudoklassenselektor

Verwenden Sie verschiedene Stile in verschiedenen Zuständen.

• E:linkE:link

• E:visited

• E:active

• E:hover

• E:focus

2、目标伪类选择器

用来匹配页面的URI中某个标识符的目标元素。

E:target

选择匹配E的所有元素，且匹配元素被相关URL指向。

3、语言伪类选择器

用来匹配使用指定语言的元素。

E:lang(language)

4、元素状态伪类选择器

当元素处于某种状态下时，才起作用，在默认状态下不起作用。

• E:checked

eg:

input[type="checkbox"]:checked{}

• E:enabled

eg:

input[type="text"]:checked{}

• E:disabled

eg:

input[type="text"]:disabled{}

5、结构伪类选择器

这个就比较多了，平时用的也比较频繁。

• :nth-child

• :nth-last-child

• :nth-of-type

• :nth-last-of-type

• :first-child

• :last-child

• :only-child

• :first-of-type

• :last-of-type

• :only-of-type

• :root 匹配元素所有在文档的根元素

• :empty 选择没有子元素的元素，且不包含节点

6、否定伪类选择器

• E:not(F)

E:besucht

E:aktiv🎜🎜🎜🎜E :hover🎜🎜🎜🎜E:focus🎜🎜🎜🎜🎜2. Der Ziel-Pseudoklassenselektor 🎜🎜🎜 wird verwendet, um das Zielelement eines bestimmten Bezeichners im URI abzugleichen der Seite. 🎜🎜E:target🎜🎜Wählt alle Elemente aus, die mit E übereinstimmen, und auf die übereinstimmenden Elemente wird durch die entsprechende URL verwiesen. 🎜🎜🎜3. Der Sprach-Pseudoklassenselektor🎜🎜🎜 wird verwendet, um Elemente mit der angegebenen Sprache abzugleichen. 🎜🎜E:lang(sprache)🎜🎜🎜4. Elementstatus-Pseudoklassenselektor🎜🎜🎜Es funktioniert nur, wenn sich das Element in einem bestimmten Zustand befindet, und funktioniert nicht im Standardzustand. 🎜🎜🎜🎜E:aktiviert🎜🎜🎜🎜eg:🎜rrreee🎜🎜🎜E:aktiviert🎜🎜🎜🎜eg:🎜rrreee🎜🎜🎜E :disabled🎜🎜🎜🎜eg:🎜rrreee🎜🎜5. Struktureller Pseudoklassenselektor🎜🎜🎜Dieser ist häufiger und wird häufiger verwendet. 🎜🎜🎜🎜:nth-child🎜🎜🎜🎜:nth-last-child🎜🎜🎜🎜:nth-of-type🎜 🎜🎜🎜:nth-last-of-type🎜🎜🎜🎜:first-child🎜🎜🎜🎜:last-child🎜🎜 🎜🎜:only-child🎜🎜🎜🎜:first-of-type🎜🎜🎜🎜:last-of-type🎜🎜🎜 🎜:only-of-type🎜🎜🎜🎜:root Entspricht allen Stammelementen des Dokuments 🎜🎜🎜🎜:empty Wählen Sie „Keine“ aus Elemente untergeordneter Elemente und enthalten keine Knoten 🎜🎜🎜🎜🎜6. Negativer Pseudoklassenselektor 🎜🎜🎜🎜🎜E:not(F) Entspricht allen E-Elementen außer F 🎜🎜🎜 🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜

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