Explication détaillée des propriétés CSS - la différence entre les pseudo-classes et les pseudo-éléments

J'ai écrit un article de blog "Propriétés CSS détaillées-: avant &&: après" avant . À cette époque, je ne faisais pas de distinction entre les pseudo-éléments et les pseudo-classes, j'ai donc confondu le concept dans l'article. Heureusement, @riophae brother m'a corrigé. Aujourd'hui, j'ai l'intention d'étudier la différence entre les deux.
Tout d' abord, lisez la w3cdéfinition des deux:

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

Deux points peuvent être clarifiés: les deux premiers sont liés au sélecteur et le second consiste à ajouter des effets "spéciaux". Spécial se réfère ici à la fois décrire d' autres csschoses ne peuvent pas être décrits.

Pseudo-classe

Types de pseudo-éléments

La différence

Ici pseudo des classes :first-childet des éléments de pseudo :first-letterà comparer.

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

// pseudo-classes :first-childpour ajouter du style au premier enfant
si nous n'utilisons pas les pseudo-classes, et l' espoir d'atteindre ces résultats, vous pouvez le faire:

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

Autrement dit, nous ajoutons une classe au premier élément enfant, puis définissons le style de cette classe. Ensuite, nous examinons les éléments:

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

// pseudo-éléments :first-letterajoutent du style à la première lettre
Donc , si nous n'utilisons pas les pseudo-éléments pour atteindre ces résultats, il devrait être comment le faire?

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

C'est, nous ajoutons une lettre au premier span, puis à spanaugmenter les styles.
La différence entre les deux est apparue. Soit:

L'effet des pseudo-classes peut être obtenu en ajoutant une classe réelle, et l'effet des pseudo-éléments peut être obtenu en ajoutant un élément réel, c'est pourquoi on les appelle pseudo-classes et pseudo-éléments.

Résumé

Les pseudo-éléments et les pseudo-classes raison si confus, en raison de leur effet similaire et le libellé est similaire, mais en fait de css3faire la distinction entre les deux, une pseudo-classe a été définie par deux points pour indiquer, alors que les pseudo-éléments sont utilisés avec deux côlons Dit.

:Pseudo-classes
::Pseudo-elements

Mais en raison de problèmes de compatibilité, la plupart d'entre eux sont toujours des deux points unifiés, mais en dehors des problèmes de compatibilité, nous devons développer autant que possible de bonnes habitudes lors de l'écriture, pour faire la distinction entre les deux.