Explication détaillée d'exemples de sélecteurs de pseudo-classe de statut d'élément d'interface utilisateur en CSS3-tutoriel CSS-php.cn

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 :
:hover{
Style CSS
}
Nous pouvons utiliser le "< element >" 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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

<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>

Copier après la connexion

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>

Copier après la connexion

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.

Par exemple

<!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>

Copier après la connexion

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>

Copier après la connexion

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.

Par exemple

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!