Explication détaillée des exemples d'utilisation de la pseudo-classe focus en CSS
En CSS : utilisation de la pseudo-classe focus, c'est-à-dire définir des styles pour les éléments qui ont reçu le focus
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>:focus</title>
<style>
*{
margin: 0;
padding: 0;
}
input:focus{
background: #cbcbcb;
}
</style></head><body>
<input type="text"/></body></html>Ce qui précède utilise : focus pour définir le style de la zone de saisie lorsqu'elle obtient le focus
: le focus est utilisé sur la page Lors de l'utilisation de la barre de navigation, l'exemple de code est le suivant :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>:focus</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
margin: 0 20px;
}
ul li a{
text-decoration: none;
}
ul li a:focus{
color: #ff290a;
}
</style></head><body>
<ul>
<li><a href="javascript:;">博客园</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">联系</a></li>
<li><a href="javascript:;">管理</a></li>
</ul></body></html>
Supplément :
Lorsque l'élément obtient le focus, si l'élément est un lien valide, vous pouvez saisir l'adresse du lien en appuyant sur la touche Touche "Entrée" ;
Vous pouvez également utiliser la touche "Tabulation" sur la page pour parcourir tous les éléments pouvant être focalisés
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
