La différence entre les pseudo-classes CSS et les pseudo-éléments

Les pseudo-classes et les pseudo-éléments sont indépendants de la structure du document. La façon dont ils obtiennent les éléments n'est pas basée sur les caractéristiques de base des éléments telles que l'identifiant, la classe et les attributs, mais sur des éléments (pseudo-classes) dans un état. Ou contenu spécial dans l'élément (pseudo-élément). Les différences sont résumées comme suit :

tr>

Attribut

Description

:active

CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

est activé Ajouter des styles aux éléments

:focus

属性	描述
:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式
:lang	向带有指定lang属性的元素添加样式

Ajoutez des styles aux éléments avec le focus de saisie au clavier

:hover

备注：在 CSS 定义中，同一个元素的 :hover 必须位于 :link、:visited 之后才能生效，:active 必须位于 :hover 之后才能生效。

Ajouter des styles aux éléments lorsque la souris les survole

:link

Ajouter des styles aux liens non visités

:visited

Au lien visité en ajoutant le style td>

:premier-enfant

Ajouter un style au premier élément enfant de l'élément

:lang

Ajouter des styles aux éléments avec l'attribut lang spécifié

属性	描述
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容
:after	在元素之后添加内容

pseudo-éléments css (Pseudo-éléments) :

est utilisé pour définir des effets spéciaux sur certains sélecteurs. Il s'agit de définir et de faire fonctionner un contenu spécifique dans l'élément <a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c</a> Le niveau de fonctionnement est plus profond que les pseudo-classes. la dynamique est pire que les pseudo-classes

.

Propriété	Description
:first-letter	Ajouter un style spécial à la première lettre du texte
:première ligne	Ajouter des styles spéciaux à la première ligne de texte
:beforeCSS	Ajouter du contenu avant l'élément
:after	Ajouter du contenu après l'élément

<a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c<li></a> Définition des deux :

CSS

Les pseudo-classes sont utilisées pour ajouter des effets spéciaux à certains sélecteurs.

:first-child:first-letter Les pseudo-éléments sont utilisés pour ajouter des effets spéciaux à certains sélecteurs.

p>i:first-child {color: red}<p>
    <i>first</i>
    <i>second</i></p>

:first-childDifférence

Ici, nous utilisons la pseudo-classe

.first-child {color: red}<p>
    <i class="first-child">first</i>
    <i>second</i></p>

et le pseudo-élément

pour la comparaison.

p::first-letter {color: red}<p>I am stephen lee.</p>

// Pseudo-classe ::first-letter Ajouter du style au premier élément enfant
Si nous n'utilisons pas de pseudo-classe et que nous voulons obtenir l'effet ci-dessus, nous pouvons faire ceci :

.first-letter {color: red}<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

C'est-à-dire que nous ajoutons une classe au premier élément enfant, puis définissons le style de cette classe. Jetons ensuite un œil aux pseudo-éléments : spanspan
//Pseudo-éléments

Ajouter du style à la première lettre

Donc si on n'utilise pas de pseudo-éléments, que devrait que faisons-nous pour obtenir l'effet ci-dessus ?

Autrement dit, nous ajoutons un

à la première lettre, puis ajoutons un style à

.

La différence entre les deux est apparue. C'est-à-dire :

css3

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 ils sont appelés une pseudo-classe, une raison appelée un pseudo-élément.

:Pseudo-classes
::Pseudo-elements

RésuméLa raison pour laquelle les pseudo-éléments et les pseudo-classes sont si faciles à confondre est que leurs effets sont similaires et leurs méthodes d'écriture sont similaires, mais en fait Afin de distinguer les deux, il a été clairement précisé que les pseudo-classes sont représentées par un deux-points, et les pseudo-éléments sont représentés par deux deux-points. Mais 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.

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!