La pseudo-classe représente le statut du sélecteur, tel que :hover, :active, :last-child, etc. Ils commencent par deux points (:). La syntaxe de la
pseudo-classe CSS est la suivante -
:pseudo-class{
attribute: /*value*/
}De même, les pseudo-éléments sont utilisés pour sélectionner des éléments virtuels, tels que ::after, ::before, ::first-line, etc. .
Ceux-ci commencent par un double deux-points (::).
La syntaxe du pseudo-élément CSS est la suivante -
::pseudo-element{
attribute: /*value*/
}L'exemple suivant illustre les propriétés de la pseudo-classe CSS et du pseudo-élément.
Démonstration en direct
<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
padding: 3%;
font-size:1.4em;
color: tomato;
background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>Cela produira les résultats suivants -
Démonstration en direct
<!DOCTYPE html>
<html>
<head>
<style>
p::after {
content: " BOOM!";
background: hotpink;
}
p:last-child {
font-size: 1.4em;
color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>Cela produira les résultats suivants -
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!
Comment résoudre le problème selon lequel WLAN n'a pas de configuration IP valide
technologie informatique en nuage
Java appelle le service Web
Comment résoudre les caractères tronqués de Filezilla
Les dix principaux échanges de devises numériques
Comment utiliser la fonction dict en Python
À quelles touches les flèches font-elles référence dans les ordinateurs ?
Qu'est-ce que le quota de disque
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
