Maison > Article > interface Web > Analyse sur le sélecteur de pseudo-classe de statut d'élément d'interface utilisateur CSS3
Analyse sur le sélecteur de pseudo-classe de statut d'élément d'interface utilisateur CSS3
- 不言original
- 2018-06-14 16:30:241581parcourir
Cet article présente principalement les sélecteurs de pseudo-classe d'état des éléments de l'interface utilisateur CSS3, notamment survol, actif et 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é navigateur :
E:hover Prend en charge Firefox, Safari, Opera, ie8, chrome ------------
E:active Prend en charge Firefox, Safari, Opera, Chrome Ne prend pas en charge ie8
E : focus Opéra, -------------E: lecture seule Prend en charge Firefox, Opera Ne prend pas en charge ie8, Safari, chrome
E:read-write Prend en charge Firefox, Opera ne prend pas en charge ie8, Safari, Chrome
E :checked Prend en charge Firefox, Safari, Opera et Chrome Ne prend pas en charge ie8
E::selection Prend en charge Firefox , Safari, Opera et Chrome Ne prend pas en charge ie8
E:default Prend en charge uniquement Firefox ---------- --
E:indeterminate Prend en charge uniquement Chrome Ne prend pas en charge ie8
E: valide Prend en charge Firefox et Safari, Opera, Chrome ne prend pas en charge IE8
E : Requis 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 : Prise en charge In-Ranger, Firefox, Safari, Opera, Chrome Ne prend pas en charge ie8
E : out-of-rang Prend en charge Firefox, Safari, Opera, Chrome Ne prend pas en charge ie8
Ce qui suit est un détail explication de 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. E: sélecteur de pseudo-classe activé et E: sélecteur de pseudo-classe désactivé
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. E:sélecteur de pseudo-classe en lecture seule et E:sélecteur de pseudo-classe en lecture-écriture
1). Le sélecteur E:read-only 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. Le sélecteur de pseudo-classe E:coché, E:par défaut et indéterminé 1). utilisé Spécifiez le style lorsque le bouton radio ou la case à cocher dans le formulaire est 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::sélection 1) . Le sélecteur de pseudo-classe E:selection est utilisé pour spécifier le style lorsque l'élément est sélectionné.
<!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: 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 le style lorsque le contenu de l'élément ne peut pas passer le contrôle spécifié par HTML5 en utilisant des attributs tels que requis de l'élément ou lorsque le contenu de l'élément n'est pas conforme au format spécifié par 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>7: 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, des éléments de sélection et des é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 dans la plage 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 valide de l'élément est limitée à une plage et que la valeur d'entrée réelle se trouve 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.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. ! Recommandations associées : Analyse sur la différence entre l'utilisation de rgba et de l'opacité pour définir la transparence en CSS
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!