Maison >interface Web >tutoriel CSS >Un article expliquant en détail le sélecteur de pseudo-classe d'état de l'interface utilisateur en CSS

Un article expliquant en détail le sélecteur de pseudo-classe d'état de l'interface utilisateur en CSS

青灯夜游original: 2022-08-03 12:09:492665parcourir

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 de pseudo-classe de statut d'interface utilisateur
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 "" L'attribut type de l'élément.

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Le résultat d'exécution est le suivant :

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

运行结果如下图所示：

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

运行结果如下图所示：

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

运行结果如下图所示：

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

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 :

nbsp;html>


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


<h1>选择器E:hover、E:active和E:focus</h1>

Le résultat exécuté est le suivant :

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

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 :

nbsp;html>


<meta>
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;
        }
    </style>


<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>

Le résultat d'exécution est le suivant :

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

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 ; > sélecteur de pseudo-classe. L'exemple de code est le suivant :

nbsp;html>


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


<h1>read-only伪类选择器与E:read-write伪类选择器</h1>

Le résultat d'exécution est le suivant :

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

5. E:focus selector

:focus : utilisé pour spécifier le style utilisé par l'élément pour obtenir le focus du curseur

L'exemple de code est le suivant :

nbsp;html>


<meta>
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>


<h1>checked伪类选择器</h1>

6 : sélecteur de pseudo-classe activé et E : sélecteur de pseudo-classe désactivé Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS 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é.

nbsp;html>


<meta>
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>


<h1>default伪类选择器</h1>

7. E: sélecteur de pseudo-classe en lecture seule et E: sélecteur de pseudo-classe en lecture-écriture

1Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

1), E: le sélecteur en lecture seule est utilisé pour spécifier quand l'élément est Le style 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.

nbsp;html>


<meta>
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>


<h1>indeterminate伪类选择器</h1>

性别：男女

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.

nbsp;html>


<meta>
<title>伪类选择器E::selection</title>
<style>
::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>


<h1>伪类选择器E::selection</h1>
<input>

🎜🎜🎜🎜Sélection par défaut 🎜🎜

nbsp;html>


<meta>
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>


<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>

🎜🎜🎜

nbsp;html>

	
		<meta>
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	
	
		<h1>E:required伪类选择器与E:optional伪类选择器</h1>

🎜🎜🎜🎜🎜🎜9. utilisé pour spécifier quand l'élément est sélectionné Le style de l'État. 🎜

nbsp;html>


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


<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input>

🎜🎜🎜🎜🎜🎜10. E: sélecteur de pseudo-classe invalide et E: sélecteur de pseudo-classe valide🎜🎜🎜🎜1), E: sélecteur de pseudo-classe invalide est utilisé pour spécifier quand le contenu de l'élément ne peut pas être utilisé. via HTML5 La vérification spécifiée par des attributs tels que require de l'élément ou le style 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 le contenu de l'élément est conforme au format spécifié par l'élément. . 🎜rrreee🎜🎜🎜11. E: sélecteur de pseudo-classe obligatoire et E: sélecteur de pseudo-classe facultatif🎜🎜🎜

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

nbsp;html>

	
		<meta>
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	
	
		<h1>E:required伪类选择器与E:optional伪类选择器</h1>

12、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

nbsp;html>


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


<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input>

1Un article expliquant en détail le sélecteur de pseudo-classe détat de linterface utilisateur en CSS

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Présentation du modèle de boîte CSS et des propriétés de dimensionnement des boîtesArticle suivant：Présentation du modèle de boîte CSS et des propriétés de dimensionnement des boîtes

Articles Liés

Voir plus