検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >css3 UI要素ステータス擬似クラスセレクターの解析

css3 UI要素ステータス擬似クラスセレクターの解析

不言
不言オリジナル
2018-06-14 16:30:241615ブラウズ

この記事では主に、ホバー、アクティブとフォーカス、有効、無効、読み取り専用、読み取り/書き込みなどを含む、CSS3 の UI 要素ステータス疑似クラス セレクターを紹介します。必要な友人は参照してください

いわゆる UI selectors: つまり、指定されたスタイルは、要素が特定の状態にある場合にのみ有効になり、デフォルト状態では機能しません。

ブラウザの互換性:

E:hover Firefox、safari、Opera、ie8、chromeをサポート ------------
E:active firefox、safari、Opera、chromeをサポート ie8はサポートしません
E:focus Firefox、safariをサポート、Opera、ie8、chrome -------------
E:enabled Firefox、safari、Opera、chrome をサポート ie8 はサポートしません
E:disabled Firefox、safari、Opera、chrome をサポート サポートしませんie8
E :read-only firefox、Operaをサポート ie8、safari、chromeはサポートしません
E:read-write firefox、Operaをサポートします ie8、safari、chromeをサポートしません
E:checked firefox、safari、Opera、chromeをサポートしますie8
E: :selection をサポートしません Firefox、safari、Opera、chrome をサポートします ie8
E:default をサポートしません Firefox のみをサポートします E:indeterminate -
E:invalid Firefox、safari、Opera、chrome をサポート ie8 はサポートしません
E:valid firefox、safari、Opera、chrome をサポート ie8 をサポートしません
E:required firefox、safari、Opera、chrome をサポートします ie8 をサポートしません
E:optional Firefox、safari、Opera、chrome をサポートします ie8 をサポートしません
E:in-range は、Firefox、safari、Opera、chrome をサポートします。 ie8 はサポートされません。
E:out-of-rang は、Firefox、safari、Opera、Chrome をサポートしません。使用について;

1. セレクター E:hover、E:active、および E:focus
1) E:hover セレクターは、マウス ポインターが要素の上に移動したときにその要素で使用されるスタイルを指定するために使用されます
使い方：
558dc77cf99fee6757323747f07fa144:hover{
CSS style
}
「558dc77cf99fee6757323747f07fa144」に要素の type 属性を追加できます。
例:
input[type="text"]:hover{
CSS style
}
2)、E:active セレクターは、要素がアクティブ化されるときに使用されるスタイルを指定するために使用されます
3)、E:focus セレクターが使用されますカーソルのフォーカスを取得するために要素が使用するスタイルを指定するために使用されます。主にテキスト ボックス コントロールがフォーカスを取得してテキスト入力を実行するときに使用されます。

例: 

<!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:enabled 擬似クラス セレクターと E:disabled 擬似クラス セレクター
1) 要素が使用可能なときにスタイルを指定するために使用されます。州。
2). E:disabled セレクターは、要素が無効な状態にある場合のスタイルを指定するために使用されます。

例: 

<!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:read-only 擬似クラス セレクターと E:read-write 擬似クラス セレクター
 1) を指定するために使用されます。読み取り専用状態の要素のスタイル。
2). E:read-write セレクターは、要素が非読み取り専用状態にあるときにスタイルを指定するために使用されます。 

<!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. 疑似クラス セレクター E:checked、E:default、および indeterminate
1) E:cehcked 疑似クラス セレクターは、フォーム内のラジオ ボタンまたはチェックボックスがオンの場合を指定するために使用されます。状態を選択するときのスタイル。
2). E:default セレクターは、ページを開いたときにデフォルトで選択されるラジオ ボタンまたはチェック ボックス コントロールのスタイルを指定するために使用されます。
3). E:indeterminate セレクターは、ページを開いたときにラジオ ボタン ボックスのグループ内の 1 つのラジオ ボタン ボックスも選択状態に設定されていない場合に、ラジオ ボタン ボックスのグループ全体のスタイルを指定するために使用されます。 

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

デフォルトの選択

<!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. 疑似クラスセレクター E::selection
1) E:selection 疑似クラスセレクターは、要素が選択されたときのスタイルを指定するために使用されます。

例:

<!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. E:invalid pseudo-class selector と E:valid pseudo-class selector
1) 要素のコンテンツが使用できない場合を指定するために使用されます。 HTML5 経由 要素のコンテンツが要素で指定された形式に準拠していない場合に、要素の属性 (require や style など) で指定されるチェック。
2). E:valid 疑似クラスセレクターは、要素の requirede などの属性を使用して要素の内容が HTML5 で指定されたチェックを通過できる場合、または要素の内容が HTML5 で指定された形式に準拠している場合にスタイルを指定するために使用されます。要素。

例:

<!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. E:required 擬似クラス セレクターと E:optional 擬似クラス セレクター
1) は、必須属性が許可されることを指定するために使用されます。使用され、必須が指定されています。 属性の input 要素、select 要素、および textarea 要素のスタイル。
2). E:optional 疑似クラス セレクターは、必須属性の使用が許可されている入力要素、選択要素、テキストエリア要素のスタイルを指定するために使用されますが、必須属性が指定されていません。 

<!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:in-range 擬似クラス セレクターと E:out-of-range 擬似クラス セレクター
1) 有効な値を指定するために使用されます。要素のスタイルは範囲に制限されており、実際の入力値はこの範囲内にあります。
2). E:out-of-range 疑似クラス セレクターは、要素の有効な値が範囲に制限されているが、実際の入力値が範囲を超えている場合に使用されるスタイルを指定するために使用されます。

例

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

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS で透明度を設定するための rgba と opacity の使用の違いの分析

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

php html5 firefox css chrome safari css3 select checkbox 指针 default 选择器 伪类 input ui
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS3レイヤーシャドウとテキストシャドウの使用次の記事：CSS3レイヤーシャドウとテキストシャドウの使用

関連記事

続きを見る