Maison >interface Web >tutoriel CSS >Explication détaillée d'exemples de sélecteurs de pseudo-classe de statut d'élément d'interface utilisateur en CSS3
Explication détaillée d'exemples de sélecteurs de pseudo-classe de statut d'élément d'interface utilisateur en CSS3
- 巴扎黑original
- 2017-08-12 14:45:541480parcourir
Cet article présente principalement le sélecteur de pseudo-classe de statut d'élément d'interface utilisateur de CSS3, y compris le survol, l'actif et le focus, activé, désactivé en lecture seule et en lecture-écriture, etc. Les amis dans le besoin peuvent s'y référer
Le soi-disant sélecteur d'interface utilisateur : le style spécifié ne fonctionne que lorsque l'élément est dans un certain état, et ne fonctionne pas dans l'état par défaut !
Compatibilité des navigateurs :
E:hover Prise en charge de Firefox, Safari, Opera, ie8, chrome ------------
E:active Prise en charge de Firefox, Safari , Opera, chrome Ne prend pas en charge ie8
E:focus Prend en charge Firefox, Safari, Opera, ie8, chrome -------------
E:enabled Prend en charge Firefox, Safari, Opera , chrome Ne prend pas en charge ie8
E:disabled Prend en charge Firefox, Safari, Opera, chrome Ne prend pas en charge ie8
E:read-only Prend en charge Firefox, Opera Ne prend pas en charge ie8, safari, chrome
E:read- écrire Firefox pris en charge, Opera ne prend pas en charge ie8, safari, chrome
E:checked Prend en charge Firefox, Safari, Opera, chrome Ne prend pas en charge ie8
E::selection Prend en charge Firefox, Safari, Opera et Chrome Ne prend pas en charge ie8
E : par défaut 只支持firefox ------------
E:indéterminé 只支持chrome ------------
E:invalid 支持firefox、safari、Opera、 chrome Ne prend pas en charge ie8
E:valid Prend en charge firefox, safari, Opera, chrome Ne prend pas en charge ie8
E:obligatoire Prend en charge firefox, safari, Opera, chrome Ne prend pas en charge ie8
E:facultatif Prend en charge Firefox, Safari, Opera, Chrome Ne prend pas en charge ie8
E:in-range Prend en charge Firefox, Safari, Opera, Chrome Ne prend pas en charge ie8
E:hors de portée Prend en charge Firefox, Safari, Opera, Chrome ie8 n'est pas pris en charge
Voici des instructions détaillées sur son utilisation ;
1. Sélecteurs E:hover, E:active et E:focus
1). Le sélecteur E:hover est utilisé pour spécifier quand le pointeur de la souris se déplace vers Le style utilisé par l'élément lorsque l'élément est activé
Comment utiliser :
558dc77cf99fee6757323747f07fa144:hover{
Style CSS
}
Nous pouvons utiliser le "cbc0c9b0b64514ead058e93407459a40" pour ajouter l'attribut type de l'élément.
Exemple :
input[type="text"]:hover{
Style CSS
}
2). Le sélecteur E:active permet de préciser le style utilisé lorsque l'élément est activé.
3). Le sélecteur E:focus est utilisé pour spécifier le style utilisé par l'élément pour obtenir le focus du curseur. Il est principalement utilisé lorsque le contrôle de zone de texte obtient le focus et effectue la saisie de texte.
Par exemple :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
</style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br/>
<br/>
密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>2.
1). Le sélecteur E:enabled est utilisé pour spécifier le style lorsque l'élément est dans l'état disponible.
2). Le sélecteur E:disabled est utilisé pour spécifier le style lorsque l'élément est dans un état désactivé.
Par exemple :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
</style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>3. sélecteur de pseudo-classe read -write
1), E: le sélecteur en lecture seule est utilisé pour spécifier le style lorsque l'élément est en lecture seule.
2). Le sélecteur E:read-write est utilisé pour spécifier le style lorsque l'élément est dans un état non en lecture seule.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
</style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>4 Sélecteurs de pseudo-classe E:vérifié, E:par défaut et indéterminé
1) , Le sélecteur de pseudo-classe E:cehcked est utilisé pour spécifier le style lorsque le bouton radio ou la case à cocher du formulaire est dans l'état sélectionné.
2). Le sélecteur E:default est utilisé pour spécifier le style du bouton radio ou de la case à cocher qui est dans l'état sélectionné par défaut lorsque la page est ouverte.
3). Le sélecteur indéterminé E: est utilisé pour spécifier le style de l'ensemble du groupe de boîtes de boutons radio lorsqu'aucune boîte de boutons radio dans un groupe de boîtes de boutons radio n'est définie sur l'état sélectionné lorsque la page est ouverte.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox">水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>
</body>
</html>Sélection par défaut
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox" checked>水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>
</body>
</html><h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
性别：
<input type="radio">男
<input type="radio">女
</form>
</body>
</html> 5. Sélecteur de pseudo-classe E::selection
1). Le sélecteur de pseudo-classe E:selection est utilisé pour spécifier le style lorsque l'élément est sélectionné.
Par exemple
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>
<input type="text" placeholder="文本">
</body>
</html>6: E: sélecteur de pseudo-classe invalide et E: sélecteur de pseudo-classe valide <.> 1). Le sélecteur de pseudo-classe E:invalid est utilisé pour spécifier quand le contenu de l'élément ne peut pas passer la vérification spécifiée par HTML5 en utilisant des attributs tels que requis de l'élément ou si le contenu de l'élément n'est pas conforme. au format spécifié par le style de l'élément.
2). Le sélecteur de pseudo-classe E:valid est utilisé pour spécifier le style lorsque le contenu de l'élément peut passer la vérification spécifiée par HTML5 en utilisant des attributs tels que requis de l'élément ou lorsque le contenu de l'élément est conforme au format spécifié. par l'élément.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱">
</form>
</body>
</html>E:sélecteur de pseudo-classe obligatoire et E:sélecteur de pseudo-classe facultatif 1). Le sélecteur de pseudo-classe E:required est utilisé pour spécifier les styles des éléments d'entrée, sélectionner les éléments et les éléments de zone de texte qui sont autorisés à utiliser l'attribut requis et ont spécifié l'attribut requis.
2). Le sélecteur de pseudo-classe E:facultatif est utilisé pour spécifier le style des éléments d'entrée, sélectionner les éléments et les éléments de zone de texte qui sont autorisés à utiliser l'attribut requis et l'attribut requis n'est pas spécifié.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" required>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>8. E: sélecteur de pseudo-classe à portée et E: sélecteur de pseudo-classe hors de portée 1). Le sélecteur de pseudo-classe E:in-range est utilisé pour spécifier le style lorsque la valeur effective de l'élément est limitée à une plage et que la valeur d'entrée réelle est dans cette plage.
2). Le sélecteur de pseudo-classe E: hors plage est utilisé pour spécifier le style à utiliser lorsque la valeur effective de l'élément est limitée à une plage, mais que la valeur d'entrée réelle la dépasse.
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!