À propos des différences et des précautions entre les pseudo-classes et les pseudo-éléments en CSS3

Les concepts de pseudo-classes et pseudo-éléments en CSS se confondent facilement

Parlons aujourd'hui de la différence entre pseudo-classes et pseudo-éléments

---

Définition

Tout d'abord, jetons un coup d'œil aux définitions des pseudo-classes et des pseudo-éléments
w3c les explique ainsi

• Pseudo-classe : utilisé pour ajouter des effets spéciaux à certains sélecteurs

• Pseudo-élément : utilisé pour ajouter des effets spéciaux à certains sélecteurs

Pour être honnête, peut-être que mon chinois n'est pas bon, je pense que ces deux phrases sont équivalentes :-)
Je ne vois aucune différence
Ils ajoutent tous les deux "ajouter" à certains sélecteurs Stunt "

Le standard a une telle phrase, qui se traduit comme suit

CSS introduit les concepts de pseudo-classe et pseudo-élément afin d'implémenter le document basé sur le Formatage des informations en dehors de l'arbre

est plus abstrait. En fait, cela signifie des éléments supplémentaires que l'on ne peut pas sélectionner via la classe , id. , etc.

Différence

Nous avons besoin d'un exemple pour comprendre cette différence

<p>
    <em>This</em>
    <em>is a text</em></p>

Et si nous voulons la couleur de la police de la première balise em à devenir rouge Comment faire
C'est facile d'utiliser les pseudo-classes familières

em:first-child {    color: red;}

Mais que faisons-nous s'il n'y en a pas pseudo-classes ?
C'est ce que nous devons faire Le même effet peut être obtenu en ajoutant la classe

<p>
    <em class="first-child">This</em>
    <em>is a text</em></p>

em.first-child {    color: red;}

à la première balise em

---

<p>
    <em>This</em>
    <em>is a text</em></p>

ou cet exemple
Maintenant, je veux le paragraphe Comment faire devenir une lettre rouge

Cette fois, nous devons utiliser des pseudo-éléments

p::first-letter {    color: red;}

Supposons de la même manière que les pseudo-éléments n'existent pas
À l'heure actuelle, nous ne pouvons imbriquer que les balises span pour atteindre

<p>
    <em><span>T</span>his</em>
    <em>is a text</em></p>

p span {    color: red;}

---

En voyant cela, je pense que tout le monde a compris pourquoi l'une est appelée pseudo-classe et l'autre est appelée pseudo-élément
pseudo-classe L'effet peut être obtenu en ajoutant des classes réelles
L'effet des pseudo-éléments peut être obtenu en ajoutant des éléments réels
Leur la différence essentielle est de savoir si l'abstraction crée de nouveaux éléments

Historique

Les pseudo-classes étaient initialement utilisées pour représenter la dynamique des éléments (lien pseudo-classes d'ancrage typique, visité, survol , actif)
Il a été étendu dans la norme CSS2 pour que la logique existe mais n'a pas besoin d'être identifiée dans l'arborescence DOM
Les pseudo-éléments représentent les éléments enfants d'un certain élément Bien que la logique existe, elle n'existe pas. dans l'arborescence DOM

Bien que nous confondions facilement leurs concepts
Mais cela n'affecte pas notre utilisation normale

Je l'ai dit dans l'introduction et le résumé d'utilisation des sélecteurs CSS3
Pseudo les classes ne peuvent utiliser que ":"
Et les pseudo-éléments peuvent utiliser ":" , vous pouvez également utiliser "::"
Ici, je vais vous expliquer pourquoi

---

La norme en CSS3 est la suivante les pseudo-classes utilisent un seul deux-points ":"
tandis que les pseudo-éléments utilisent un double deux-points ": :" (pour éviter toute confusion)
Mais avant cela, les pseudo-classes et les pseudo-éléments utilisaient un seul deux-points " :"
Donc afin d'assurer la compatibilité avec les pseudo-éléments, les deux méthodes d'utilisation sont possibles
Mais la version inférieure d'IE a un problème de compatibilité avec les doubles deux-points
, donc les gens qui écrivaient des styles utilisaient simplement des deux-points simples pour les pseudo-classes et les pseudo-éléments
, provoquant la persistance de cette confusion

Remarque

Lors de l'utilisation de pseudo-classes et de pseudo-éléments
Une chose à laquelle il faut prêter une attention particulière est
Les pseudo-classes sont comme les vraies classes et peuvent être utilisées en combinaison
Il n'y a pas de limite supérieure sur le nombre, tant qu'elles ne s'excluent pas mutuellement
Par exemple : 🎜>

em:first-child:hover {    color: red;}

Ceci est tout à fait possible

Mais notez que voici la relation entre "et"
C'est-à-dire qu'il doit satisfaire à la fois l'élément "premier-enfant" premier enfant
et Le

---

le pseudo-élément est beaucoup plus strict lorsqu'il s'agit de suspension du curseur "survolé"

Le pseudo-élément ne peut apparaître qu'une seule fois dans un sélecteur, et ne peut apparaître qu'à la fin ( Certains étudiants ont mal compris ici, j'ai donc apporté des modifications)
Les styles suivants ne prendront pas effet

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
    color: red;}

p::first-letter::selection {  /*错误的写法：伪元素出现了多个*/
    color: red;}

---

Laissez-moi dire encore une chose à leur sujet

Priorité Lors du calcul des poids
Les pseudo-classes ont la même priorité que les classes
Les pseudo-éléments ont la même priorité que les balises

Résumé

• Pseudo les classes et les pseudo-éléments sont tous deux utilisés pour ajouter des effets spéciaux aux sélecteurs

• La différence essentielle entre les pseudo-classes et les pseudo-éléments est de savoir si l'abstraction crée de nouveaux éléments

• Les pseudo-classes peuvent être superposées tant qu'elles ne s'excluent pas mutuellement

• Les pseudo-éléments ne peuvent apparaître qu'une seule fois dans un sélecteur, et ne peuvent apparaître qu'à la fin

• La priorité de la pseudo-classe et du pseudo-élément est la même que la priorité de la classe et de la balise respectivement

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!