Quelle est la différence entre les pseudo-classes CSS3 et les pseudo-éléments ?

Différence : 1. Les pseudo-classes sont utilisées pour ajouter des styles correspondants aux éléments existants lorsqu'ils sont dans un certain état, tandis que les pseudo-éléments sont utilisés pour créer des éléments qui ne sont pas dans l'arborescence DOM et leur ajouter des styles 2 ; . Les pseudo-éléments seront créés Un élément en dehors de l'arborescence du document, la pseudo-classe ne le sera pas ; 3. Les pseudo-éléments sont représentés par deux points "::", et les pseudo-classes sont représentées par un simple deux-points : :.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Que sont les pseudo-classes et les pseudo-éléments

Quand le mot « pseudo » est évoqué, à quoi pensez-vous ? "Faux", "pseudo-gouvernement de Wang Jingwei", "inexistant"...

Pseudo-classe : Utilisé pour ajouter des éléments correspondants à des éléments existants lorsqu'ils sont dans un certain état (glisser, cliquer, etc. ) Style, cet état change dynamiquement en fonction du comportement de l'utilisateur. Je crois comprendre que c'est un état qui n'existe pas en soi et qui ne sera déclenché que dans des circonstances spécifiques (glisser, cliquer). Vous pouvez utiliser CSS pour modifier l'objet dans cet état. Par exemple : lorsque l'utilisateur survole un élément spécifié, vous pouvez utiliser :hover pour décrire l'état de l'élément. Bien qu'il soit similaire au CSS général et puisse ajouter des styles aux éléments existants, il ne peut être utilisé que lorsqu'il se trouve dans un. état qui ne peut pas être décrit par l'arborescence DOM. Les éléments ajoutent des styles, ils sont donc appelés pseudo-classes.

Pseudo-éléments : Utilisé pour créer des éléments qui ne sont pas dans l'arborescence DOM et leur ajouter des styles. Par exemple, nous pouvons utiliser :before pour ajouter du texte avant un élément et ajouter des styles au texte. Bien que l'utilisateur puisse voir le texte, il ne se trouve pas réellement dans le document DOM.

La différence entre les pseudo-classes et les pseudo-éléments :

Veuillez consulter l'exemple suivant :

Exemple 1 :

<ul>
 <li>第一列</li>
 <li>第二列</li>
</ul>

Si nous voulons ajouter du style à la première colonne, nous pouvons le faire dans le de deux manières :

(1) Ajouter une classe à la première colonne et définir le style dans la classe :

<ul>
  <li class="first-item">第一列</li> 
  <li>第二列</li></ul>
</ul>

.first-item{color:orange;}

(2) S'il n'est pas nécessaire d'ajouter une classe, nous pouvons définir le : pseudo-premier enfant- pour le premier 25edfb22a4f469ecb59f1190150159c6 Pour y ajouter des styles, à ce moment, le li modifié existe toujours dans l'arborescence DOM

<ul>
  <li>第一个</li>
  <li>第二个</li>
</ul>


li:first-child{color:orage;}

Exemple 2 :

<p>Hello World, and wish you have a good day!</p>

Si vous souhaitez ajouter des styles à la première lettre du paragraphe, vous pouvez utiliser les méthodes suivantes :

(1) Enveloppez l'élément 45a2772a6b6107b401db3c9b82c049c2 à la première lettre et définissez le style pour span :

<p>
  <span class="first">H</span>ello World, and wish you have a good day!
</p> 


.first{color:red;}

(2) Si l'élément 45a2772a6b6107b401db3c9b82c049c2 le pseudo-élément P:première lettre à l'élément e388a4556c0f65e1904146cc1a846bee Ajoutez-y un style À ce stade, il semble qu'un élément span virtuel soit créé et qu'un style y soit ajouté, mais en fait cet élément span le fait. n'existe pas dans le DOM

<p>Hello World, and wish you have a good day!</p>

p:first-letter{color:red;}

À partir de l'exemple ci-dessus, nous pouvons voir : Pseudo-classe L'objet opération est un élément existant dans l'arborescence du document, tandis que le pseudo-élément crée un élément en dehors de l'arborescence du document. Par conséquent, la différence entre les pseudo-classes et les pseudo-éléments réside dans le fait qu'un élément en dehors de l'arborescence du document soit créé ou non.

Utiliser un simple deux-points ou un double deux-points pour les pseudo-éléments ?

La spécification CSS3 nécessite l'utilisation de doubles deux-points (::) pour représenter les pseudo-éléments afin de distinguer les pseudo-classes et les pseudo-éléments. Par exemple, les pseudo-éléments tels que ::before et ::after utilisent des doubles deux-points (::), :hover Utilisez un seul deux-points (:) avec la pseudo-classe :active. À l'exception de certains navigateurs inférieurs à IE8, la plupart des navigateurs prennent en charge la méthode de représentation double deux-points (::) des pseudo-éléments.

Cependant, à l'exception de quelques pseudo-éléments tels que ::backdrop, qui doivent utiliser des doubles-points (::), la plupart des pseudo-éléments prennent en charge l'écriture de deux-points et de deux-points. Par exemple ::after, il peut fonctionner normalement si. écrit comme suit : après.

La norme w3c stipule que bien que la norme CSS3 exige que les pseudo-éléments soient écrits avec des doubles-points, l'écriture avec un seul deux-points est toujours prise en charge. Pour des raisons de compatibilité ascendante, nous vous recommandons de continuer à utiliser la méthode d'écriture avec un seul deux-points pour le moment.

Les pseudo-classes couramment utilisées sont :

 : active sélectionne l'élément en cours d'activation (correspond à l'état spécifié)

 : survol sélectionne l'élément survolé par la souris (correspond à l'état spécifié)

 : lien sélectionne le élément non visité (correspond à l'état spécifié)

:visited sélectionne l'élément qui a été visité (correspond à l'état spécifié)

:first-child sélectionne l'élément qui est le premier élément enfant de son élément parent

:lang(value ) sélectionne l'élément avec Spécifiez l'élément avec l'attribut lang

:focus Sélectionne l'élément avec le focus de saisie au clavier

:enable Sélectionne chaque élément activé

:disable Sélectionne chaque élément désactivé

:checked Sélectionne chaque élément sélectionné

: target sélectionne l'élément d'ancrage actuel

 : first-of-type sélectionne un élément qui est le premier élément enfant d'un certain type de son élément parent

 : last-of-type sélectionne un élément qui satisfait le dernier élément enfant de son élément parent Un élément d'un certain type d'élément enfant

:only-of-type Sélectionne un élément qui est le seul élément enfant d'un certain type de son élément parent

:nth-of-type(n) Sélectionne un élément qui satisfait le nième élément de son parent Un élément d'un certain type d'élément enfant

:nth-last-of-type(n) sélectionne un élément d'un certain type qui satisfait le nième dernier élément de son élément parent

 : only-child sélectionne un élément qui satisfait à la condition selon laquelle il est le seul enfant de son élément parent Elements of elements

:last-child sélectionne l'élément qui est le dernier élément de son élément parent

:nth-child(n) sélectionne l'élément qui est le nième élément enfant de son élément parent

:nth-last-child(n) Sélectionnez les éléments qui sont le nième enfant du dernier au dernier de leur élément parent

 : vide Sélectionnez les éléments qui n'ont aucun élément enfant

 : dans la plage Sélectionnez les éléments qui ont une valeur dans la plage spécifiée

 : hors de- range Sélectionnez la valeur Les éléments qui ne sont pas dans la plage spécifiée

:invalid Sélectionnez les éléments qui satisfont à la valeur d'une valeur invalide

:valid Sélectionnez les éléments qui satisfont la valeur de la valeur valide

:not(selector) Sélectionnez les éléments qui ne satisfont pas selector

:facultatif Sélectionnez les éléments de formulaire d'option disponibles, c'est-à-dire qu'il n'y a pas d'attribut "obligatoire"

:lecture seule Sélectionnez les éléments du formulaire avec "lecture seule"

:lecture-écriture Sélectionnez les éléments du formulaire sans "lecture seule"

:root Sélectionnez les éléments racines

Pseudo-élément couramment utilisé

::first-letter sélectionne le premier mot de l'élément spécifié

::first-line sélectionne la première ligne de l'élément spécifié

::after insère le contenu avant le contenu de l'élément spécifié

::before Insérer du contenu après le contenu de l'élément spécifié

::selection Sélectionnez le contenu sélectionné par l'utilisateur dans l'élément spécifié

(Partage vidéo d'apprentissage : Tutoriel vidéo 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!