css 3のUI要素ステータス擬似クラスセレクタ

7732 ワード

UIセレクタとは、指定されたスタイルがエレメントが何らかの状態にある場合にのみ機能し、デフォルトでは機能しません.
ブラウザの互換性:
E:hoverサポートfirefox、safari、Opera、ie 8、chrome---------E:activeサポートfirefox、safari、Opera、chromeサポートie 8 E:focusサポートfirefox、safari、Opera、ie 8、chrome----------E:enabledはfirefox、safari、Opera、chromeはie 8 Eをサポートしていません:disabledはfirefox、safari、Opera、chromeはie 8 E:read-onlyはfirefoxをサポートしていません.Operaはie 8、safari、chrome E:read-writeはfirefox、Operaはie 8、safari、chrome E:checkedはfirefox、safari、Opera、chromeはie 8 E::selectionはfirefox、safari、Opera、chromeはie 8 Eをサポートしていません:defaultはfirefoxのみをサポートします---------E:indeterminateはchromeのみをサポートします---------E:invalidサポートfirefox、safari、Opera、chromeサポートie 8 E:validサポートfirefox、safari、Opera、chromeサポートie 8 E:requiredサポートfirefox、safari、Opera、chromeサポートie 8 E:optionalサポートfirefox、safari、Opera、chromeサポートie 8 E:in-rangeサポートfirefox、safari、Opera、chromeサポートie 8 E:out-of-rangサポートfirefox、safari、Opera、chromeはie 8をサポートしていません.以下、その使用について詳しく説明します.
1、セレクタE:hover、E:active、E:focus 1)、E:hoverセレクタは、マウスポインタがエレメントに移動するときにエレメントが使用するスタイルの使用方法を指定するために使用されます::hover{CSSスタイル}エレメントのtypeプロパティを「」に追加できます.例:input[type="text"):hover{CSSスタイル}2)、E:activeセレクタエレメントがアクティブ化されたときに使用するスタイル3)、E:focusセレクタはエレメントを指定してカーソルフォーカスポイントを取得するために使用するスタイルで、主にテキストボックスコントロールでフォーカスポイントを取得して文字入力を行うときに使用します.
例:



    
       E:hover、E:active E:focus
    


E:hover、E:active E:focus



、E:enabled擬似クラスセレクタとE:disabled擬似クラスセレクタ
1)、E:enabledセレクタを使用して、要素が使用可能な状態にあるときのスタイルを指定します.
2)、E:disabledセレクタを使用して、要素が使用できない場合のスタイルを指定します.
例:



    
    E:enabled      E:disabled     
    


E:enabled E:disabled



3、E:read-only擬似クラスセレクタとE:read-write擬似クラスセレクタ
1)、E:read-onlyセレクタを使用して、要素が読み取り専用の場合のスタイルを指定します.
2)、E:read-writeセレクタを使用して、要素が読み取り専用でない場合のスタイルを指定します.



    
    read-only      E:read-write     
    


read-only E:read-write



4、疑似クラスセレクタE:checked、E:defaultおよびindeterminate
1)、E:cehcked擬似クラスセレクタは、フォームのradioラジオボックスまたはcheckboxチェックボックスが選択されている場合のスタイルを指定します.
2)、E:defaultセレクタは、ページが開いているときにデフォルトで選択されているラジオボックスまたはチェックボックスのコントロールのスタイルを指定します.
3)、E:indeterminateセレクタは、ページが開いたときに、ラジオボックスのセットの中で選択された状態に設定されていないラジオボックスのスタイルを指定します.



    
    checked     
    


checked

デフォルトの選択項目



    
    default     
    


default

indeterminate

indeterminate

indeterminate

5、擬似クラスセレクタE::selection
1)、E:selection擬似クラスセレクタは、要素が選択されているときのスタイルを指定します.
たとえば



    
         E::selection
    


E::selection

, , bug, ! , , bug, ! , , bug, ! , , bug, ! , , bug, !


6、E:invalid擬似クラスセレクタとE:valid擬似クラスセレクタ
1)、E:invalid擬似クラスセレクタは、エレメントコンテンツがHTML 5で使用されているエレメントのrequirdeなどの属性で指定されたチェックやエレメントコンテンツがエレメントで規定されたフォーマットに合致しない場合のスタイルを指定するために使用されます.
2)、E:valid擬似クラスセレクタは、エレメントコンテンツがHTML 5を介して使用可能なエレメントのrequirdeなどの属性で指定されたチェックやエレメントコンテンツがエレメントに規定されたフォーマットに合致する場合のスタイルを指定するために使用されます.
たとえば



    
    E:invalid      E:valid     
    


E:invalid E:valid


7、E:required擬似クラスセレクタとE:optional擬似クラスセレクタ
1)、E:required擬似クラスセレクタは、requiredプロパティの使用を許可し、requiredプロパティが指定されているinput要素、select要素、textarea要素のスタイルを指定します.
2)、E:optional擬似クラスセレクタは、requiredプロパティの使用を許可し、requiredプロパティが指定されていないinput要素、select要素、textarea要素のスタイルを指定します.



    
    E:required      E:optional     
    


E:required E:optional




8、E:in-range擬似クラスセレクタとE:out-of-range擬似クラスセレクタ
1)、E:in-range擬似クラスセレクタは、要素の有効値が範囲内に限定され、実際の入力値が範囲内にある場合のスタイルを指定します.
2)、E:out-of-range擬似クラスセレクタは、要素の有効値が一定の範囲内に限定されているが、実際に入力値が超過している場合に使用されるスタイルを指定するために使用されます.
たとえば



    
    E:in-range      E:out-of-range     
    


E:in-range E:out-of-range