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 w3c
dé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 css
choses ne peuvent pas être décrits.
Pseudo-classe
Types de pseudo-éléments
La différence
Ici pseudo des classes :first-child
et 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-child
pour 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-letter
ajoutent 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 à span
augmenter 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 css3
faire 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.