Attributs CSS : la différence entre les pseudo-classes CSS et les pseudo-éléments CSS (avec code)

Les pseudo-éléments CSS et les pseudo-classes peuvent être facilement confondus pour les étudiants qui viennent juste d'apprendre le CSS. La documentation officielle explique : les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux à certains sélecteurs, et les pseudo-éléments CSS sont utilisés pour. ajouter des effets spéciaux à certains sélecteurs Effets ajoutés à certains sélecteurs. Alors, quelle est la différence entre les pseudo-éléments CSS et les pseudo-classes ? Cet article vous donnera une explication détaillée.

Tout d'abord, deux points peuvent être clarifiés. Premièrement : les deux sont liés aux sélecteurs, et deuxièmement : ils ajoutent des effets "spéciaux". Ce qui est spécial ici, c'est que les deux décrivent des choses que les autres css ne peuvent pas décrire.

Types de pseudo-classes

Différence

Ici, nous utilisons la pseudo-classe :first-child et le pseudo-élément :first-letter pour la comparaison.

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

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

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

C'est-à-dire que nous ajoutons une classe au premier élément enfant, puis définissons le style de cette classe. Alors regardons les éléments :

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

//Pseudo-élément :first-letter Ajouter du style à la première lettre
Ensuite si on n'utilise pas de pseudo- éléments, que faut-il réaliser Que faut-il faire pour obtenir l’effet ci-dessus ?

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

Autrement dit, nous ajoutons un span à la première lettre, puis ajoutons un style à span.
La différence entre les deux est apparue. C'est-à-dire :

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.

Enfin

La raison pour laquelle les pseudo-éléments et les pseudo-classes sont si facilement confondus est qu'ils ont des effets similaires et des méthodes d'écriture similaires, mais en fait css3 Pour distinguer les deux, il a été clairement indiqué 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.

:Pseudo-classes
::Pseudo-elements

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.

Articles connexes recommandés :

css-pseudo-classes et pseudo-elements_html/css_WEB-ITnose

Propriétés CSS : before && :Utilisation d'after, la différence entre pseudo-classes et pseudo-éléments_html/css_WEB-ITnose

Que sont les pseudo-éléments CSS ? Explication détaillée de l'utilisation des pseudo-éléments CSS

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!