Maison >interface Web >tutoriel CSS >Explication détaillée des exemples d'utilisation de la pseudo-classe focus en CSS
Explication détaillée des exemples d'utilisation de la pseudo-classe focus en CSS
- 黄舟original
- 2017-10-20 11:07:281899parcourir
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
Exemple 1
<!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
Exemple 2
: 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!