UI要素の状態疑似クラスセレクター

いわゆる ui 要素ステータス擬似クラスは、主にフォーム要素のさまざまな状態のスタイルを制御する擬似クラス セレクターです。
テキストボックスの使用可能または使用不可、チェックボックスとラジオボタンの選択または選択解除などのフォーム要素のさまざまな状態。

CSS 3 には 11 の UI 疑似クラス セレクターがあり、次のとおりです:

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/*只支持Opera*/

1 つずつ説明:

1.E: ホバー セレクターは、マウス ポインターが上に移動したときに要素によって使用されるスタイルを指定するために使用されます。それ。
2.E:active セレクターは、要素がアクティブ化されたとき (マウスが要素上で押されたが離されなかったとき) に使用されるスタイルを指定するために使用されます。
3.E: フォーカス セレクターは、要素がフォーカスを受け取ったときに使用されるスタイルを指定するために使用されます。主にテキスト ボックス コントロールがフォーカスされ、テキスト入力に使用される場合に使用されます。
4:E:enabled セレクターは、現在の要素が利用可能な状態にあるときにスタイルを指定するために使用されます
5:E:disabled セレクターは、現在の要素が利用できない状態にあるときにスタイルを指定するために使用されます
6.E:read -only セレクターは、要素が読み取り専用状態にあるときのスタイルを ff の下に -moz-read-only の形式で記述する必要がある場合を指定するために使用されます
7.E: 読み取り/書き込みセレクターは、指定するために使用されます要素が非読み取り専用状態にあるときのスタイル。 ff では、-moz-read-write の形式で記述する必要があります
8.E: チェックされたセレクターは、フォーム内のラジオ ボタンまたはチェックボックスが選択状態にあるときにスタイルを指定するために使用されます。 ff では、-moz-checked の形式で記述する必要があります
9.E: デフォルトのセレクターは、ページを開いたときにデフォルトで選択されるラジオ ボタンまたはチェック ボックスのスタイルを指定するために使用されます。なお、デフォルトで選択状態となっているラジオボタンやチェックボックスをユーザが非選択状態に変更しても、E:defaultセレクタで設定したスタイルは有効となります。
10.E: ページを開いたときにラジオ ボタンのグループ内のいずれかのラジオ ボタンが選択状態に設定されていない場合、不定セレクターはラジオ ボタンのグループ全体のスタイルを指定するために使用されます。ユーザーがこのグループ内のいずれかのラジオ ボタンを選択すると、ラジオ ボタンのグループ全体のスタイルのスタイルが設定されません。
11.E::selection セレクターは、要素が選択されたときのスタイルを指定するために使用されます。ここで注意する必要があるのは、ff で使用する場合は、-moz-selection の形式で記述する必要があることです。

りー


学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style type="text/css"> ul li{ list-style:none; } input[type='text']:disabled{ color:green; } </style> </head> <body> <ul> <li><input type="text" value="php中文网"/></li> <li><input type="text" disabled value="php中文网"/></li> </ul> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜