CSS introduit les concepts de pseudo-classes et de pseudo-éléments pour formater les informations au-delà de l'arborescence du document. En d'autres termes, les pseudo-classes et pseudo-éléments sont utilisés pour modifier des parties qui ne sont pas dans l'arborescence du document, comme la première lettre d'une phrase, ou le premier élément d'une liste, ou lorsque la souris survole un certain Le style à définir lorsque le lien hypertexte est activé.
Que sont les pseudo-éléments ?
Pseudo-éléments : utilisés pour créer des éléments qui ne sont pas dans l'arborescence du document et leur ajouter des styles. En fait, les pseudo-éléments sont des choses qui ne peuvent pas être faites par des sélecteurs ordinaires avant ou après certains éléments. Le contenu du contrôle est le même que celui de l'élément, mais il s'agit lui-même d'une abstraction basée sur les éléments et n'existe pas dans la structure du document. Par exemple, nous pouvons utiliser :before pour ajouter du texte devant un élément et ajouter des styles à ce texte.
Caractéristiques des éléments
1. Avantages :
(1) N'occupez pas de nœuds DOM et réduisez le nombre de nœuds DOM.
(2) Laissez CSS vous aider à résoudre certains problèmes JavaScript et à simplifier le développement.
(3) Évitez d'ajouter des éléments de page dénués de sens.
2. Inconvénients :
(1) Pas propice au débogage.
(2) Les pseudo-éléments ne sont pas vraiment reflétés dans le contenu du document, mais uniquement dans l'effet visuel, vous ne pouvez donc pas ajouter de contenu pratique aux pseudo-éléments, et cette partie du contenu ne sera pas explorée par les moteurs de recherche.
CSS fournit une série de pseudo-éléments, comme indiqué dans le tableau suivant :
1. ::après
Le pseudo element::after peut insérer du contenu après l'élément spécifié. Dans ::after, vous devez utiliser l'attribut content pour définir le contenu à ajouter, et dans ::after, vous devez définir l'attribut content pour prendre effet. (aucun contenu ne doit être inséré) La valeur de l'attribut content peut être définie comme vide).
2. ::avant
Le pseudo-élément ::before peut insérer du contenu avant l'élément spécifié. Semblable à ::after, l'attribut content doit également être utilisé dans ::before pour définir le contenu à ajouter, et l'attribut content doit être défini dans ::before pour prendre effet (quand il n'y a pas de contenu à insérer, la valeur de l'attribut content peut être définie comme nulle).
3. ::première lettre
Le pseudo-élément ::first-letter est utilisé pour définir le style du premier caractère du contenu dans l'élément spécifié. Il est généralement utilisé avec les attributs font-size et float pour créer un effet de lettrine. Il convient de noter que le pseudo-élément ::first-letter ne peut être utilisé que pour les éléments de niveau bloc. Si les éléments en ligne souhaitent utiliser ce pseudo-élément, ils doivent d'abord être convertis en éléments de niveau bloc.
4. ::première ligne
Le pseudo element::first-line est utilisé pour définir le style de la première ligne de contenu dans l'élément spécifié. Semblable à ::first-letter, le pseudo element::first-line ne peut être utilisé que pour les éléments de niveau bloc. . Les éléments en ligne veulent utiliser ce pseudo-élément, vous devez d'abord le convertir en élément de niveau bloc.
5. ::sélection
Le pseudo element::selection est utilisé pour définir le style lorsque l'objet est sélectionné. Il convient de noter que le pseudo element::selection ne peut définir la couleur, l'arrière-plan, le curseur, le contour et l'ombre du texte que lorsque l'élément est sélectionné (IE11). ne le prend pas encore en charge Définir cet attribut) et d'autres attributs.
6. ::espace réservé
Le pseudo element::placeholder est utilisé pour définir le texte d'espace réservé (texte défini via l'attribut placeholder de HTML) des éléments de formulaire (éléments <input>, <textarea>).