Que signifient les pseudo-classes et pseudo-éléments CSS3 ?

En CSS3, la pseudo-classe est un sélecteur utilisé pour ajouter des styles correspondants aux éléments existants lorsqu'ils sont dans un certain état, et cet état change dynamiquement en fonction du comportement de l'utilisateur et le pseudo-élément signifie « faux » « Élément » ou « ; élément de camouflage" est un sélecteur utilisé pour créer et styliser des éléments qui ne sont pas dans l'arborescence DOM.

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

Qu'est-ce qu'une pseudo-classe ?

pseudo-classe est un sélecteur utilisé pour ajouter des styles correspondants aux éléments existants lorsqu'ils sont dans un certain état (glisser, cliquer, etc.), et cet état est basé sur le comportement de l'utilisateur et les changements dynamiques.

Par exemple : lorsque l'utilisateur survole un élément spécifié, vous pouvez utiliser :hover pour décrire l'état de cet é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 que dans un état qui. ne peut pas être décrit par l'arborescence DOM. Ce n'est qu'ainsi que vous pouvez ajouter des styles aux éléments, c'est pourquoi ils sont appelés pseudo-classes.

Que sont les pseudo-éléments ?

Pseudo-élémentsLa compréhension simple est « faux éléments » ou « éléments de déguisement ». En fait, cela peut être compris de cette façon. Les pseudo-éléments sont en fait des éléments virtuels qui n'existent pas (sous forme de code), et vous ne pouvez pas les trouver dans le document, donc les pseudo-éléments sont des éléments virtuels.

Le pseudo-élément est un sélecteur utilisé pour créer des éléments qui ne sont pas dans l'arborescence DOM et leur ajouter des styles.

Avec les pseudo-éléments, vous pouvez définir des styles pour des parties spécifiques de l'élément sélectionné sans recourir à l'ID ou aux attributs de classe de l'élément. Par exemple, grâce aux pseudo-éléments, vous pouvez définir le style de la première lettre d'un paragraphe, ou insérer du contenu avant ou après l'élément, etc.

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 des deux manières suivantes :

(1) Ajoutez une classe à la première colonne et définissez 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 : premier-enfant à la première pseudo-classe

à y ajouter des styles. À l'heure actuelle, 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 à 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 peut définir P:first sur l'élément

Le pseudo-élément -letter y ajoute des styles. À ce stade, il semble qu'un élément span virtuel soit créé et que des styles y soient ajoutés, 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 Out : L'objet opération de la pseudo-classe 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 côlon ou un double côlon 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, des pseudo-éléments tels que ::before et. ::après avoir utilisé des doubles deux-points (::), les pseudo-classes :hover et :active utilisent un seul deux-points (:). À l'exception de certains navigateurs inférieurs à IE8, la plupart des navigateurs prennent en charge la méthode de représentation double deux-points (<code>::) des pseudo-éléments. ::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而除了少部分伪元素如::backdrop必须使用双冒号（::），大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after

Cependant, à l'exception de quelques pseudo-éléments tels que ::backdrop qui doivent utiliser des doubles deux-points (::), la plupart des pseudo-éléments prennent en charge l'écriture de deux points et de deux points, tels que : :after, écrit sous la forme <code>:after peut toujours s'exécuter normalement.

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é)

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

• :link Sélectionnez les éléments qui n'ont pas été visités (correspondent à l'état spécifié)

• :visited Sélectionnez les éléments qui ont été visités (correspondent à l'état spécifié)

• :first-child Sélectionnez l'élément qui est le premier élément enfant de son élément parent

• :lang(value) Sélectionne les éléments avec l'attribut lang spécifié

• :focus Sélectionne les éléments avec le focus de saisie au clavier

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

• :disable Sélectionnez Chaque élément interdit

•  : coché sélectionne chaque élément sélectionné

•  : cible sélectionne l'élément d'ancrage actuel

•  : premier de type sélectionne le premier élément qui satisfait son parent, un élément qui est un élément enfant d'un certain type🎜

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

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

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

• :nth-last-of-type(n) Sélectionne l'élément élément qui satisfait à la condition qu'il soit le nième élément enfant de son élément parent L'avant-dernier n élément d'un certain type

• :uniquement-enfant sélectionne l'élément qui est le seul élément enfant de son élément parent

•  : 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électionne l'élément qui est l'avant-dernier nième élément enfant de son élément parent

• : vide Sélectionne les éléments qui n'ont pas d'éléments enfants

• :in-range Sélectionne les éléments dont la valeur est dans la plage spécifiée

• :out-of-range Sélectionne les éléments dont la valeur n'est pas dans la plage spécifiée

• :invalid Sélectionne les éléments dont la valeur n'est pas valide

• :valid Sélectionne les éléments dont la valeur est valide

• :not(selector) Sélectionne éléments qui ne satisfont pas le sélecteur

•  : facultatif La sélection est disponible Option éléments du formulaire, 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 -write Sélectionnez les éléments du formulaire sans "lecture seule"

• :root select Root element

Pseudo-éléments couramment utilisés

• ::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érer le contenu avant le contenu de l'élément spécifié

• ::before Insérer le 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!