ホームページ > 記事 > ウェブフロントエンド > CSSのUI状態擬似クラスセレクターを詳しく解説した記事

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

青灯夜游オリジナル: 2022-08-03 12:09:492602ブラウズ

UI 状態擬似クラスセレクターは、特定の状態の UI 要素を選択するために使用されます。主に HTML フォームで使用されます。フォーム要素のさまざまな状態に応じてさまざまなスタイルを定義します。 . ユーザーエクスペリエンスを向上させるため。

UI ステータス擬似クラスセレクターの特性: 指定されたスタイルは特定の状態でのみ機能します

フォーム要素のステータスには、フォーカス、フォーカスの喪失、選択済み、選択解除、使用可能が含まれます、使用不可、有効、無効、必須、オプション、読み取り専用など。

#E:focusedフォームでフォーカスされた要素を選択します#3E:checked選択したラジオまたはチェックボックス要素をフォームで選択しますE:enabledE:disabledE:validE:invalidE:in-rangeE :out-of -rangeE:required

UI ステータス疑似クラスセレクター
セレクター	関数の説明	バージョン

	#3
フォームで使用可能な要素を選択します	3
形式で使用できない (つまり無効になっている) 要素を選択します。	3
フォーム内のコンテンツが要件を満たす要素を選択してください	3
フォームに入力されたコンテンツが要件を満たさない要素 (不正な URL や電子メールなど)、またはパターン属性で指定されたパターンと一致しない要素を選択してください	3
フォームに入力された数値が有効範囲内にある要素を選択します	3
フォームに入力された数値が有効範囲を超えている要素を選択してください	3
フォーム内の要素を選択してください必須要素	3
E:optional	必須属性の使用が許可されているが、フォームで必須として指定されていない要素を選択します	3
E :read-only	フォーム内の読み取り専用要素を選択してください	3
E:read-write	ステータスが読み取り専用ではないフォーム内の要素を選択します	3
E:default	ラジオボタンまたはチェックボックスを選択しますデフォルトでは選択状態にある選択ボックス。ユーザーがラジオボタンまたはチェックボックスコントロールの選択状態を非選択状態に設定した場合でも、E:default セレクターで指定されたスタイルは引き続き有効です	3
E:indeterminate	セレクターフォーム内のラジオボタンボックスがどれも選択されていない場合の、ラジオボタンボックスのグループ全体のスタイル。ユーザーがラジオボタンボックスのいずれかを選択すると、スタイルは割り当てられていません	3

1. E:hover selector

は、マウスポインターが要素の上に移動したときに要素によって使用されるスタイルを指定するために使用されます。使用法:

<元素>:hover{ 
CSS样式 
}

「」に要素の type 属性を追加できます。

例:

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

実行結果は以下のようになります:

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

2. E:active selector

:active

: リンクをクリックしたときのスタイルを定義します。あなたは、

:active

疑似クラスセレクターを介してリンクをクリックするときにスタイルを定義できます。サンプルコードは次のとおりです。 <pre class="brush:html;toolbar:false"><!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></pre>実行結果は次のとおりです。以下:

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

3. E:リンクセレクター

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

実行結果は次のとおりです。以下に示すように:

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

4.E: 訪問済みセレクター

: 訪問済み: 訪問先リンクのスタイルを定義します。

訪問先リンクのスタイルは、

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

実行結果は以下の通りです:

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

5. E: フォーカスセレクター

: focus: Used カーソルフォーカスを取得するために要素で使用されるスタイルを指定します。

サンプルコードは次のとおりです。

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>

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

6、E:enabled 擬似クラスセレクターおよび E:disabled 擬似クラスセレクター

1)、E:enabled セレクターはスタイルの指定に使用されます。要素が使用可能な状態にあるとき。

2). E:disabled セレクターは、要素が無効な状態にあるときにスタイルを指定するために使用されます。

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>

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

7. E:読み取り専用疑似クラスセレクターと E:読み取り/書き込み疑似クラスセレクター

1)、E:read-only セレクターは、要素が読み取り専用状態にある場合のスタイルを指定するために使用されます。

2). E:read-write セレクターは、要素が非読み取り専用状態にあるときにスタイルを指定するために使用されます。

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>

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

8、疑似クラスセレクター E: チェック済み、E: デフォルトおよび不定

1 )、E:cehcked 擬似クラスセレクターは、フォーム内のラジオラジオボタンまたはチェックボックスが選択状態にあるときのスタイルを指定するために使用されます。

2). E:default セレクターは、ページを開いたときにデフォルトで選択状態にあるラジオボタンまたはチェックボックスコントロールのスタイルを指定するために使用されます。
3). E: 不定セレクターは、ページを開いたときにラジオボタンボックスのグループ内の 1 つのラジオボタンボックスも選択状態に設定されていない場合に、ラジオボタンボックスのグループ全体のスタイルを指定するために使用されます。

nbsp;html>


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


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

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

デフォルトの選択

nbsp;html>


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


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

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

nbsp;html>


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


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

CSSのUI状態擬似クラスセレクターを詳しく解説した記事

##9. 擬似クラスセレクター E::selection

E:selection 擬似クラスセレクターは、要素が選択されたときのスタイルを指定するために使用されます。

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>

1CSSのUI状態擬似クラスセレクターを詳しく解説した記事

#10. E:無効な擬似クラスセレクターと E:有効な擬似クラスセレクター

1), E:invalid 擬似クラスセレクタは、要素のrequiredeなどの属性を利用して要素内容がHTML5で規定されたチェックを通過できない場合、または要素内容がHTML5で規定された形式に準拠していない場合のスタイルを指定するために使用されます。要素。 2). E:valid 擬似クラスセレクターは、要素の requirede などの属性を利用して要素内容が HTML5 で規定されたチェックを通過できる場合、または要素内容がで指定された形式に準拠している場合のスタイルを指定するために使用されます。要素。

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>

11. E:必須の擬似クラスセレクターと E:オプションの擬似クラスセレクター

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

选择器	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	√

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>

各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前端入门）

以上がCSSのUI状態擬似クラスセレクターを詳しく解説した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS ボックスモデルとボックスサイズ設定プロパティの紹介次の記事：CSS ボックスモデルとボックスサイズ設定プロパティの紹介

続きを見る