Le sélecteur de pseudo-classe d'état de l'interface utilisateur est utilisé pour sélectionner des éléments de l'interface utilisateur dans un certain état. Il est principalement utilisé sur les formulaires HTML. Selon les différents états des éléments du formulaire, différents styles sont définis pour améliorer l'expérience utilisateur.
Caractéristiques du sélecteur de pseudo-classe de statut de l'interface utilisateur : le style spécifié ne fonctionne que dans un certain état
Le statut de l'élément de formulaire inclut l'obtention du focus, la perte du focus, sélectionné, non sélectionné, disponible, indisponible, valide, invalide, obligatoire, facultatif, en lecture seule, etc.
| sélecteur | Description de la fonction | version |
|---|---|---|
| E:focused | Sélectionnez l'élément ciblé dans le formulaire | 3 |
| E :vérifié | L'élément radio ou case à cocher sélectionné dans le formulaire de sélection | 3 |
| E:enabled | Les éléments disponibles dans le formulaire de sélection | 3 |
| E:disabled | Non disponible dans le formulaire de sélection (c'est-à-dire désactivé ) ) éléments | 3 |
| E:valid | Sélectionnez les éléments dont le contenu rempli dans le formulaire répond aux exigences | 3 |
| E:invalid | Sélectionnez les éléments dont le contenu rempli dans le formulaire ne répond pas aux exigences, telles qu'une URL ou un e-mail illégal, ou ne correspond pas au modèle donné par l'attribut de motif | 3 |
| E:in-range | Sélectionnez les éléments dont le numéro saisi dans le formulaire se trouve dans la plage valide | 3 |
| E:hors plage | Sélectionnez les éléments dont le nombre saisi dans le formulaire dépasse la plage valide | 3 |
| E:obligatoire | Sélectionnez les éléments requis dans le formulaire | 3 |
| E:facultatif | L'attribut obligatoire est autorisé dans le formulaire de sélection et les éléments qui ne sont pas spécifiés comme requis | 3 |
| E:lecture seule | Les éléments du formulaire de sélection dont le statut est en lecture- only | 3 |
| E:read-write | Sélectionnez les éléments du formulaire qui ne sont pas en lecture seule | 3 |
| E:default | Sélectionnez les cases radio ou les cases à cocher qui sont dans l'état sélectionné par défaut, même si l'utilisateur le fera. L'état sélectionné du bouton radio ou du contrôle de case à cocher est défini sur l'état non sélectionné, et le style spécifié dans le sélecteur E: par défaut est toujours valide | 3 |
| E : indéterminé | Un groupe de sélections radio dans le formulaire de sélection Le style de l'ensemble des cases de boutons radio lorsqu'aucune case de bouton radio n'est sélectionnée dans la boîte. Si l'utilisateur sélectionne l'une des cases de boutons radio, le style n'est pas spécifié | . 3 |
1. E:hover selector
est utilisé pour spécifier le style utilisé par l'élément lorsque le pointeur de la souris le survole
Comment l'utiliser :
<元素>:hover{
CSS样式
}Nous pouvons l'ajouter dans "
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>Le résultat d'exécution est le suivant :
2. E:active selector
:active : Définissez le style lorsque vous cliquez sur le lien. :active：定义点击链接时的样式。
通过:active伪类选择器可以定义点击链接时的样式，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
a:active {
background: #000;
border: 1px solid black;
color: white;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>运行结果如下图所示：
3、E:link选择器
:link：定义普通或未访问链接的样式；
通过:link伪类选择器可以为普通或未访问的链接设置样式，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>运行结果如下图所示：
4、E:visited选择器
:visited：定义已经访问过链接的样式；
通过:visited伪类选择器可以为已经访问过的链接设置样式，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px soild red;
color: red;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>运行结果如下图所示：
5、E:focus选择器
:focus
Vous pouvez définir le style lorsque vous cliquez sur un lien via le sélecteur de pseudo-classe :active. L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<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>Le résultat exécuté est le suivant :
3. E:link selector:link : Définissez le style des liens ordinaires ou non visités ;
Vous pouvez définir le style des liens ordinaires ou non visités via le sélecteur de pseudo-classe :link, l'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<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>
4. E : sélecteur visité
:visited : Définit le style du lien visité
Vous pouvez définir le style du lien visité via le :visited</code ; > sélecteur de pseudo-classe. L'exemple de code est le suivant : <br/> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<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></pre><div class="contentsignin">Copier après la connexion</div></div></p>Le résultat d'exécution est le suivant : <p><img src="https://img.php.cn/upload/image/950/708/406/165949913875271Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS" title="165949913875271Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS" alt="Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS"/><img src="https://img.php.cn/upload/image/358/879/819. /165949880722497Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS" title="165949880722497Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS" alt=" Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS"/></p><p><strong><span style="max-width:90%">5. E:focus selector</span></strong></p><p><code>:focus : utilisé pour spécifier le style utilisé par l'élément pour obtenir le focus du curseur
<!DOCTYPE html>
<html>
<head>
<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>
6 : sélecteur de pseudo-classe activé et E : sélecteur de pseudo-classe désactivé
<!DOCTYPE html>
<html>
<head>
<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>7. E: sélecteur de pseudo-classe en lecture seule et E: sélecteur de pseudo-classe en lecture-écriture
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>
<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>
8, sélecteurs de pseudo-classe E:checked, E:default et indeterminate
1), le sélecteur de pseudo-classe E:cehcked est utilisé pour spécifier le bouton radio ou la case à cocher dans le formulaire Le style de la case à cocher lorsqu'elle est sélectionnée. 2). Le sélecteur E:default est utilisé pour spécifier le style du bouton radio ou de la case à cocher sélectionné par défaut à l'ouverture de la page. 3). Le sélecteur E:indéterminé 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>
<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>
<input type="text" placeholder="文本">
</body>
</html><!DOCTYPE html>
<html>
<head>
<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><!DOCTYPE html>
<html>
<head>
<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><!DOCTYPE html>
<html>
<head>
<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>1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
<!DOCTYPE html>
<html>
<head>
<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>12、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
<!DOCTYPE html>
<html>
<head>
<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>
各UI元素状态伪类选择器受浏览器的支持情况
| 选择器 | Firefox | Safari | Opera | IE8 | Chrome |
|---|---|---|---|---|---|
| E:hover | √ | √ | √ | √ | √ |
| E:active | √ | √ | √ | x | √ |
| E:focus | √ | √ | √ | √ | √ |
| E:enable | √ | √ | √ | x | √ |
| E:disable | √ | √ | √ | x | √ |
| E:read-only | √ | x | √ | x | x |
| E:read-write | √ | x | √ | x | x |
| E:checked | √ | √ | √ | x | √ |
| E:default | √ | x | x | x | x |
| E:indeterminate | √ | √ | x | √ | √ |
| E:selection | √ | √ | √ | x | √ |
（学习视频分享：web前端入门）
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)
