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 :

Quels types de sélecteurs CSS existe-t-il ? Une brève introduction aux sélecteurs couramment utilisés en CSS

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!