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

:visité

Pseudo-classe

Fonction
td >

:actif

Ajouter des styles aux éléments activés

伪类	作用
:active	将样式添加到被激活的元素
:focus	将样式添加到被选中的元素
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	将特殊样式添加到未被访问过的链接
:visited	将特殊样式添加到被访问过的链接
:first-child	将特殊样式添加到元素的第一个子元素
:lang	允许创造者来定义指定的元素中使用的语言

:focus

Ajouter des styles aux éléments sélectionnés

:hover

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

:link

Ajouter des styles spéciaux aux liens non visités

Ajouter un spécial styles des liens visités

:first-child
td>

Ajouter des styles spéciaux au premier élément Un élément enfant

:lang

Permet aux créateurs de définir le langage utilisé dans des éléments spécifiques

Types de pseudo-éléments

伪元素	作用
：first-letter	将特殊样式添加到文本的首字母
：first=line	将特殊样式添加到文本的首行
：before	在某元素之前插入某些内容
：after	在某元素之后插入某些内容

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!