Quelle est la différence entre les pseudo-classes et les pseudo-éléments en CSS ? La différence entre :avant et ::avant

Le contenu de cet article est de vous présenter quelle est la différence entre les pseudo-classes et les pseudo-éléments en CSS ? La différence entre :before et ::before. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La pseudo-classe est utilisée pour sélectionner des informations en dehors de l'arborescence DOM, ou des informations qui ne peuvent pas être représentées par de simples sélecteurs. Le premier inclut les éléments qui correspondent à l'état spécifié, tels que :visited, :active ; le second inclut les éléments de l'arborescence DOM qui remplissent certaines conditions logiques, telles que :first-child, :first-of-type, :target. .

(équivalent à un sélecteur de classe spécial, utilisé pour ajouter quelques effets spéciaux)

Pseudo élément est un élément virtuel qui n'est pas défini dans l'arborescence DOM. Contrairement aux autres sélecteurs, il ne prend pas l'élément comme plus petite unité de sélection, il sélectionne le contenu spécifié de l'élément. Par exemple, ::before représente le contenu précédent de l'élément sélectionné, c'est-à-dire "" ; ::selection représente le contenu sélectionné de l'élément sélectionné.

(équivalent à un élément spécial (p, span), qui peut être utilisé pour stocker certains styles ou contenus spéciaux)

en CSS3 , il existe également des différences de syntaxe entre les pseudo-classes et les pseudo-éléments. Les pseudo-éléments sont modifiés pour commencer par ::. Cependant, pour des raisons historiques, les navigateurs continuent de prendre en charge les pseudo-éléments commençant par :, mais il est recommandé qu'ils soient écrits dans un format standard commençant par ::.

• Pseudo-classe

Sélecteur	Signification	CSS
:actif	Sélectionnez l'élément en cours d'activation	1
:hover	Sélectionnez l'élément survolé par la souris	1
:link	Sélectionner les éléments non visités	1
:visité	Sélectionnez l'élément visité	1
:first-child	sélectionne l'élément qui est le premier élément enfant de son élément parent	2
:lang	Sélectionner les éléments avec l'attribut lang spécifié	2
:focus	Sélectionnez l'élément avec le focus de saisie au clavier	2
:activer	Sélectionnez chaque élément activé	3
:disable	Sélectionnez chaque élément désactivé	3
:coché	Sélectionner chaque élément sélectionné	3
: target	sélectionne l'élément d'ancrage actuel	3
: premier du type	select Un élément qui est le premier élément enfant d'un certain type de son parent élément	3
:dernier de type	sélectionne un élément qui est le dernier élément enfant d'un certain type de son élément parent	3
: uniquement -of-type	Sélectionnez l'élément qui est le seul élément enfant d'un certain type de son élément parent	3
:nth-of-type(n)	Choisir satisfaisant est son élément parent du nième sous-élément d'un certain tapez	3
:énième-dernier-de-type (n)	Sélectionnez le nième élément d'un certain type qui est l'avant-dernier élément de son élément parent	3
:only-child	Sélectionne un élément qui est le seul élément enfant de son parent	3
:last-child	sélectionne le dernier élément de son parent Élément d'élément	3
:énième enfant(n)	Sélectionnez les éléments qui sont le nième enfant de leur parent	3
:ntième-dernier-enfant(n)	Sélectionne l'élément qui est le nième enfant du dernier au dernier de son élément parent	3
:vide	Sélectionner les éléments qui n'ont pas d'éléments enfants	3
:in-range	Sélectionner les éléments dont les valeurs se situent dans la plage spécifiée	3
:hors plage	Sélectionner les éléments dont les valeurs ne se trouvent pas dans la plage spécifiée	3
:invalid	Sélectionner les éléments dont les valeurs ​​sont invalides	3
:valides	Sélectionnez le valeur satisfaisante pour être valide Éléments de valeur	3
:non(sélecteur)	Sélectionnez les éléments qui ne satisfont pas le sélecteur	3
:facultatif	Sélectionnez un élément de formulaire qui est facultatif, c'est-à-dire qu'il n'y a pas d'attribut "obligatoire"	3
:lecture seule	Sélectionnez les éléments du formulaire avec "lecture seule"	3
:lecture-écriture	Sélectionner les éléments du formulaire sans "lecture seule"	3
:root	Sélectionnez l'élément racine	3

• Pseudo-élément

  Sélecteur

  Signification

  CSS

  ::première lettre

  Selector	Meaning	CSS
  ::first-letter	选择指定元素的第一个单词	1
  ::first-line	选择指定元素的第一行	1
  ::after	在指定元素的内容前面插入内容	2
  ::before	在指定元素的内容后面插入内容	2
  ::selection	选择指定元素中被用户选中的内容	3

  Sélectionnez le premier mot de l'élément spécifié

  1

   : : first-line

  Sélectionnez la première ligne de l'élément spécifié

  1

  ::after

  Insérer du contenu avant le contenu de l'élément spécifié

  2

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

  ::selection

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

  3

• :La différence entre ::avant et ::avant

• Les deux écritures les méthodes sont équivalentes et toutes deux représentent des pseudo-éléments.

:before est la manière d'écrire CSS2, et ::before est la manière d'écrire CSS3.

1. :before a une meilleure compatibilité que ::before, mais il est recommandé d'utiliser ::before

2. Remarque :

3. Les pseudo-éléments doivent être utilisés avec l'attribut de contenu

.test:hover::before { /* 这时animation和transition才生效 */ }

Les pseudo-éléments n'apparaîtront pas dans le DOM, ils ne peuvent donc pas être exploités via js. Ajoutez simplement

Les effets spéciaux des pseudo-éléments sont généralement utilisés : survolez le style de pseudo-classe pour activer

Adresse de référence : https://www.cnblogs .com/ammyben /p/8012747.htmlhttps://blog.csdn.net/yangxiaoyanger/article/details/79712180

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!