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 télécharger Binance
Que dois-je faire si le spouleur d'impression ne peut pas démarrer ?
Quels sont les systèmes de gestion communs ?
Quels sont les avantages de la base de données MongoDB
La différence entre le Wi-Fi et le Wi-Fi
Utilisation de PathFileExists
Logiciel gratuit de récupération de données
Carte graphique de qualité passionnée
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
