Welche Pseudoklassen werden in CSS3 hinzugefügt und welche Funktionen haben sie?

Der Inhalt dieses Artikels befasst sich mit den in CSS3 hinzugefügten Pseudoklassen und ihren Funktionen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Pseudoklassen und Pseudoelemente

CSS-Pseudoklassen: werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen.

CSS-Pseudoelement: Wird verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen. Ein Pseudoelement stellt ein untergeordnetes Element eines Elements dar. Obwohl dieses untergeordnete Element logisch existiert, existiert es tatsächlich nicht im Dokumentbaum.

伪元素	作用
::first-letter	将样式添加到文本的首字母
::first-line	将样式添加到文本的首行
::before	在某元素之前插入某些内容
::after	在某元素之后插入某些内容

Der Effekt einer Pseudoklasse kann durch Hinzufügen einer tatsächlichen Klasse erreicht werden, während der Effekt eines Pseudoelements durch Hinzufügen eines tatsächlichen Elements erreicht werden muss. Aus diesem Grund wird eines davon Pseudo genannt -class und das andere ist. Deshalb wird es Pseudoelement genannt.

Um Pseudoklassen und Pseudoelemente zu unterscheiden, hat CSS3 klar festgelegt, dass Pseudoklassen durch einen Doppelpunkt dargestellt werden, während Pseudoelemente durch zwei Doppelpunkte dargestellt werden. Aufgrund von Kompatibilitätsproblemen werden die meisten jedoch immer noch mit einem einzigen Doppelpunkt vereinheitlicht. Unabhängig von Kompatibilitätsproblemen sollten wir jedoch unser Bestes geben, um beim Schreiben gute Gewohnheiten zu entwickeln und zwischen den beiden zu unterscheiden.

Ein einzelner Doppelpunkt (:) wird für CSS3-Pseudoklassen und ein doppelter Doppelpunkt (::) für CSS3-Pseudoelemente verwendet. Ein Pseudoelement besteht aus einem Doppelpunkt und dem Namen des Pseudoelements. Allerdings muss der Browser gleichzeitig die alten bestehenden Pseudoelement-Schreibmethoden unterstützen, wie zum Beispiel: erste Zeile, :erster Buchstabe, :before, :after usw., während die neuen Pseudoelemente in CSS3 eingeführt werden dürfen die alten nicht mehr unterstützen.

2. Neue Pseudoklassen in CSS3

新增伪类	作用
p:first-of-type	选择属于其父元素的首个 元素的每个 元素。
p:last-of-type	选择属于其父元素的最后 元素的每个 元素。
p:only-of-type	选择属于其父元素唯一的 元素的每个 元素。
p:only-child	选择属于其父元素唯一的子元素的每个 元素。
p:nth-child(n)	选择属于其父元素的第n个子元素的每个 元素。
p:nth-last-child(n)	选择属于其父元素的倒数第n个子元素的每个 元素。
p:nth-of-type(n)	选择属于其父元素第n个 元素的每个 元素。
p:nth-last-of-type(n)	选择属于其父元素倒数第n个 元素的每个 元素。
p:last-child	选择属于其父元素最后一个子元素的每个 元素。
p:empty	选择没有子元素的每个 元素（包括文本节点）。
p:target	选择当前活动的 元素。
:not(p)	选择非 元素的每个元素。
:enabled	控制表单控件的可用状态。
:disabled	控制表单控件的禁用状态。
:checked	单选框或复选框被选中。

伪类	作用
:hover	将样式添加到鼠标悬浮的元素
:active	将样式添加到被激活的元素
:focus	将样式添加到获得焦点的元素
:link	将样式添加到未被访问过的链接
:visited	将样式添加到被访问过的链接
:first-child	将样式添加到元素的第一个子元素
:lang	定义指定的元素中使用的语言

Verwandte Empfehlungen:

Welche Arten von CSS-Selektoren gibt es? Eine kurze Einführung in häufig verwendete Selektoren in CSS

Was ist CSS? Einführung in drei CSS-Stile und Textattribute

Das obige ist der detaillierte Inhalt vonWelche Pseudoklassen werden in CSS3 hinzugefügt und welche Funktionen haben sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!