CSSの疑似クラスとは何ですか

css 疑似クラス: ":active"、":any-link"、":blank"、":checked"、":current"、":first"、":first-child"、 「:future」、「:focus」、「:has()」、「:host」など。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

疑似クラス セレクター (疑似クラスと呼ばれる) はコロンによって定義され、クリックが押された、クリックが完了したなどの要素の状態を定義します。スタイルは、疑似クラスを介して要素の状態を取得します。 CSS 疑似クラスは、セレクターに特殊効果を追加するために使用されます。

css の疑似クラスのリスト

:アクティブ	:任意のリンク	:空白	:チェック済み	:現在	:デフォルト
:定義された	:dir()	:無効	:ドロップ	:空の	:有効
:first	:first-child	:first-of-type	:全画面	:未来	:フォーカス
:フォーカス-可視	:フォーカス-ウィズ内	:has()	:host	:host()	:host-context()
:hover	:indeterminate	:in-range:invalid	:is()	:lang()	:last -child
:last-of-type	:left	:link	:local-link	:not()	:nth-child()
:nth-col()	:nth-last-child()	:nth-last-col()	:nth-last-of-type()	:nth-of-type()	：一人っ子＃＃＃＃＃＃
:タイプのみ	:オプション	:範囲外	:過去	:プレースホルダー表示	:読み取り専用
:読み取り-書き込み	:必須	:右	:root	:スコープ	:ターゲット
:対象範囲	:ユーザー無効	:有効	:visited	:where()

##一般的に使用される疑似-クラスとその分類

#1. 動的疑似クラス セレクター

#異なる状態では異なるスタイルが使用されます。

• #E:リンク

• E:訪問済み

##E:アクティブ
E:ホバー
E :focus
2. ターゲット擬似クラス セレクター

は、URI 内の識別子のターゲット要素と一致するために使用されます。ページの。

E:target

E に一致するすべての要素を選択します。一致する要素は、関連する URL によって参照されます。

3. 言語擬似クラス セレクター

は、指定された言語を使用して要素を照合するために使用されます。

E:lang(言語)

4. 要素ステータス疑似クラスセレクター

要素が特定の状態 設定が無効な場合にのみ有効になり、デフォルト状態では有効になりません。

#E:チェック済み

• 例:

  input[type="checkbox"]:checked{}

E:有効

• #例:

  input[type="text"]:checked{}

#E:無効

• ##例:

  input[type="text"]:disabled{}

  5. 構造擬似クラス セレクター

これはより一般的で、より頻繁に使用されます。

#:n 番目の子

##:n 番目の最後の子

• ##:n 番目のタイプ

• :n 番目の最後のタイプ

• #:最初の子

• :最後の子

• :唯一の子

• :最初のタイプ

• :last-of-type

• :only-of-type

• : root

  ドキュメントのすべてのルート要素と一致します

• :empty

  子要素がなく、ノードを含まない要素を選択します

• 6. 否定疑似クラス セレクター

• E:not(F)

  F を除くすべての E 要素と一致します

(学習ビデオ共有: css ビデオ チュートリアル

)

以上がCSSの疑似クラスとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。