Maison >interface Web >tutoriel CSS >Quelles sont les pseudo-classes ajoutées en CSS3 et quelles sont leurs fonctions ?
Le contenu de cet article concerne quelles sont les pseudo-classes ajoutées en CSS3 et quelles sont leurs fonctions ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
1. Pseudo-classes et pseudo-éléments
Pseudo-classe CSS : utilisée pour ajouter des effets spéciaux à certains sélecteurs.
Pseudo-élément CSS : utilisé pour ajouter des effets spéciaux à certains sélecteurs. Un pseudo-élément représente un élément enfant d'un élément Bien que cet élément enfant existe logiquement, il n'existe pas réellement dans l'arborescence du document.
伪元素 | 作用 |
::first-letter | 将样式添加到文本的首字母 |
::first-line | 将样式添加到文本的首行 |
::before | 在某元素之前插入某些内容 |
::after | 在某元素之后插入某些内容 |
L'effet de pseudo-classe peut être obtenu en ajoutant une classe réelle, tandis que l'effet de pseudo-élément doit être obtenu en ajoutant un élément réel. C'est pourquoi l'un d'eux est appelé pseudo. -class et l'autre est C'est pourquoi on l'appelle un pseudo-élément.
Afin de distinguer les pseudo-classes et les pseudo-éléments, CSS3 a clairement stipulé que les pseudo-classes sont représentées par un deux-points, tandis que les pseudo-éléments sont représentés par deux deux-points. Cependant, en raison de problèmes de compatibilité, la plupart d'entre eux utilisent encore un seul deux-points. Cependant, quels que soient les problèmes de compatibilité, nous devons faire de notre mieux pour développer de bonnes habitudes lors de l'écriture et faire la distinction entre les deux.
Un simple deux-points (:) est utilisé pour les pseudo-classes CSS3, et un double deux-points (::) est utilisé pour les pseudo-éléments CSS3. Un pseudo-élément se compose de deux points et du nom du pseudo-élément. Cependant, le navigateur doit prendre en charge en même temps les anciennes méthodes d'écriture de pseudo-éléments existantes, telles que : first-line, :first-letter, :before, :after, etc., tandis que les nouveaux pseudo-éléments introduits dans CSS3 ne sont plus autorisés à prendre en charge les anciennes.
2. Nouvelles pseudo-classes en 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 | 定义指定的元素中使用的语言 |
Recommandations associées :
Qu'est-ce que le CSS ? Introduction à trois styles CSS et attributs de texte
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!