communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Sélecteur de pseudo-classe d'état d'élément d'interface utilisateur

La pseudo-classe dite de statut d'élément ui est un sélecteur de pseudo-classe qui contrôle principalement le style des différents états des éléments de formulaire.
Différents états des éléments de formulaire tels que les zones de texte disponibles ou indisponibles, les cases à cocher et les boutons radio sélectionnés ou non, etc.

Il existe 11 sélecteurs de pseudo-classe d'interface utilisateur dans CSS 3, qui sont : 

E:hover;/*支持firefox、safari、Opera、ie8、chrome*/
E:active;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:focus; /*支持firefox、safari、Opera、ie8、chrome*/
E:enabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:disabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:read-only;/*支持firefox、Opera  不支持ie8、safari、chrome */
E:read-write/* 支持firefox、Opera  不支持ie8、safari、chrome*/ 
E:checked /*支持firefox、safari、Opera、chrome   不支持ie8*/
E::selection /* 支持firefox、safari、Opera、chrome   不支持ie8 */
E:default /*只支持firefox*/
E:indeterminate/*只支持Opera*/

Description un par un :

1.E : le sélecteur de survol est utilisé pour spécifier quand le pointeur de la souris Le style utilisé par l'élément lorsqu'il est déplacé dessus.
2.E:le sélecteur actif permet de préciser le style utilisé lorsque l'élément est activé (lorsque la souris est appuyée sur l'élément mais n'a pas été relâchée).
3.E : Le sélecteur de focus est utilisé pour spécifier le style à utiliser lorsque l'élément reçoit le focus. Il est principalement utilisé lorsque le contrôle de zone de texte est ciblé et utilisé pour la saisie de texte.
4:E:le sélecteur activé est utilisé pour spécifier le style lorsque l'élément actuel est dans l'état disponible
5:E:le sélecteur désactivé est utilisé pour spécifier le style lorsque l'élément actuel est dans l'état indisponible
6.E:read- Le seul sélecteur est utilisé pour spécifier le style lorsque l'élément est en lecture seule Sous ff, il doit être écrit sous la forme -moz-read-only
7. E : Le sélecteur de lecture-écriture est utilisé pour spécifier quand l'élément est dans un état non en lecture seule. Sous ff, il doit être écrit sous la forme -moz-read-write
8.E : Le sélecteur coché est utilisé pour spécifier le style lorsque le bouton radio ou la case à cocher du formulaire est dans l'état sélectionné. Sous ff, il doit être écrit sous la forme -moz-checked
9.E : Le sélecteur par défaut permet de spécifier le style du bouton radio ou de la case à cocher qui est sélectionné par défaut à l'ouverture de la page. Il convient de noter que même si l'utilisateur modifie le bouton radio ou la case à cocher défini par défaut sur l'état sélectionné en un état non sélectionné, le style défini à l'aide du sélecteur E: par défaut est toujours valide.
10.E : Le sélecteur indéterminé est utilisé pour spécifier le style de l'ensemble du groupe de boutons radio si un bouton radio dans un groupe de boutons radio n'est pas défini sur l'état sélectionné lors de l'ouverture de la page. Si l'utilisateur sélectionne un bouton radio de ce groupe, le style de l'ensemble du groupe de boutons radio n'est pas stylé.
11.E::selection selector est utilisé pour spécifier le style lorsque l'élément est sélectionné. Ce qu'il faut noter ici est : lorsqu'il est utilisé sous ff, il doit être écrit sous la forme -moz-selection. 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
  list-style:none;
}
input[type='text']:disabled{
  color:green;
}
</style>
</head>
<body>
<ul>
  <li><input type="text" value="php中文网"/></li>
  <li><input type="text" disabled value="php中文网"/></li>
</ul>
</body>
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> ul li{ list-style:none; } input[type='text']:disabled{ color:green; } </style> </head> <body> <ul> <li><input type="text" value="php中文网"/></li> <li><input type="text" disabled value="php中文网"/></li> </ul> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492837 joue