ホームページ >ウェブフロントエンド >CSSチュートリアル >css3におけるUI要素ステータス疑似クラスセレクターの例を詳しく解説

css3におけるUI要素ステータス疑似クラスセレクターの例を詳しく解説

巴扎黑オリジナル: 2017-08-12 14:45:541480ブラウズ

この記事では主に、ホバー、アクティブとフォーカス、有効、無効、読み取り専用、読み取り/書き込みなどを含む、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 はサポートしません 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 Supports Firefox、Safari、Opera、Chromeをサポートしていません。無効 Firefox、safari、Opera、chrome をサポート 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 は ie8 をサポートしていません
以下はその使用方法の詳細な説明です;

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)、E:read-onlyセレクターが使用されることを指定します。要素が読み取り専用状態にあるときのスタイル。
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) ラジオボタンまたはチェックボックスが複雑である場合を指定するために使用されます。フォームマーキーが選択されているときのスタイル。
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選択時のスタイルです。 例:

<!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 など) で指定されたチェックまたはスタイル。 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 疑似クラスセレクターは、要素の有効な値が範囲に制限されているが、実際の入力値が範囲を超えている場合に使用されるスタイルを指定するために使用されます。
例えば

りー

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

声明：

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

前の記事：CSS の px、em、rem、pt の違いと関連性を比較する次の記事：CSS の px、em、rem、pt の違いと関連性を比較する

続きを見る