Les pseudo-éléments CSS peuvent ajouter des effets spéciaux aux éléments sélectionnés (sélecteurs spécifiés). Un pseudo-élément est un mot-clé ajouté à la fin d'un sélecteur. Grâce aux pseudo-éléments, les développeurs peuvent définir des styles pour des parties spécifiques de l'élément sélectionné sans utiliser l'ID ou les attributs de classe de l'élément. Utilisez les deux points "::" lors de la définition des pseudo-éléments pour distinguer les pseudo-classes et les pseudo-éléments.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Les pseudo-éléments CSS peuvent ajouter des effets spéciaux aux éléments sélectionnés (sélecteurs spécifiés).
Que sont les pseudo-éléments ? Que peut-on faire ?
L'élément est en fait un concept en HTML, et les balises en HTML sont souvent appelées éléments. Alors, que sont les pseudo-éléments ? D'après son nom, false signifie faux et n'existe pas dans le DOM actuel. Mais au fait ? Nous pouvons utiliser certaines fonctionnalités CSS pour le simuler en tant qu'élément. Nous appelons un tel élément un pseudo-élément.
Les pseudo-éléments CSS sont utilisés pour définir des effets spéciaux sur certains sélecteurs ; des positions spécifiques d'éléments peuvent être sélectionnées et des styles appliqués.
Le pseudo-élément est en fait un mot-clé ajouté à la fin du sélecteur. Grâce au pseudo-élément, vous pouvez définir des styles pour des parties spécifiques de l'élément sélectionné sans utiliser l'ID ou l'attribut 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.
En CSS1 et CSS2, l'utilisation des pseudo-éléments est la même que celle des pseudo-classes, et un deux-points : est connecté au sélecteur. Cependant, dans CSS3, l'utilisation du simple deux-points pour les pseudo-éléments a été modifiée en double deux-points : pour distinguer les pseudo-classes et les pseudo-éléments. Par conséquent, il est recommandé d’utiliser des doubles-points au lieu de simples deux-points lors de l’utilisation de pseudo-éléments.
selector::pseudo-element {
property: value;
}Parmi eux, selector est le sélecteur, pseudo-élément est le nom du pseudo-élément, property est l'attribut en CSS et value est la valeur correspondant à l'attribut.
Remarque : Un seul pseudo-élément peut être utilisé dans un sélecteur, et le pseudo-élément doit suivre le sélecteur. Conformément à la dernière spécification du W3C, vous devez utiliser des doubles-points :: au lieu de simples deux-points : lors de la définition de pseudo-éléments afin de faire la distinction entre les pseudo-classes et les pseudo-éléments. Cependant, comme l'ancienne version de la spécification du W3C ne faisait pas de distinction particulière, la plupart des navigateurs prennent actuellement en charge les méthodes à simple et double deux-points pour définir des pseudo-éléments.
CSS fournit une série de pseudo-éléments, comme indiqué dans le tableau suivant :
| Pseudo éléments | Exemple | Exemple de description |
|---|---|---|
| ::après | p::après |
Insérer du contenu après chaque élément ::avant |
|
Insérez du contenu avant chaque élément ::première lettre | p::première lettre |
Correspond à la première lettre du contenu de chaque élément ::première ligne |
|
Correspond à la première ligne de contenu de chaque élément ::sélection | p::sélection | Faites correspondre la partie de l'élément sélectionnée par l'utilisateur |
| ::espace réservé | input::placeholder | Faites correspondre l'attribut d'espace réservé de chaque zone de saisie du formulaire (tel que ) |
| Exemple : utilisation de pseudo-element::after | <!DOCTYPE html>
<html>
<head>
<style>
p.one::after {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.two::after {
content:"要插入的内容";
color: red;
font-size: 6px;
}
p.three::after {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="one">伪元素 ::after</p>
<p class="two">伪元素 ::after</p>
<p class="three">伪元素 ::after</p>
</body>
</html>Copier après la connexion | (Partage vidéo d'apprentissage : |
| , | web front-end) |
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
