CSS擬似クラスセレクタまとめ

2029 ワード

動的擬似クラスセレクタ

:link,リンクダミークラスセレクタ,ハイパーリンクがアクセスされていない前

:visited,リンクダミークラスセレクタ,ハイパーリンクは

にアクセスされている.

:active、ユーザ動作擬似クラスセレクタ、マッチング要素がアクティブ化された状態、例えばリンク、ボタン

:hover、ユーザ動作擬似クラスセレクタ、マウスが要素にとどまるときのスタイル

:focus,ユーザ動作擬似クラスセレクタ,マッチング要素取得焦点

ターゲット擬似クラスセレクタ

:target、一致する要素は関連urlによって

を指す.

言語擬似クラスセレクタ

:lang(en)

UIステータス擬似クラスセレクタ

:checked

:enabled

:disabled

構造擬似クラスセレクタ

:first-child

li:first-child /*     li  ，    li            */

:last-child

li:last-child /*  li  ，    li              */

:root

li:root /*  li          。     html*/

:nth-child(n)

li:nth-child(4) 
/*  li  ，    li         4   ，n  1    ，*/
/*n      ，  2n+1，       ：odd、even*/

:nth-last-child(n)

li:nth-last-child(4) 
/*  li  ，    li               ，  n 1，         */

:nth-of-type(n)

li:nth-of-type(2)
/*  li  ，    li         2 li*/

:nth-last-of-type(n)

:first-of-type

:last-of-type

:only-child

li:only-child /*  li  ，    li        li  */

:only-of-type

li:only-of-type
/*  li  ，  li         li  */

:empty

li:empty /*  li  ，   li       */

No擬似クラスセレクタ

:not()

input:not([type='text'])