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:
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
