ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの擬似クラスとは何ですか

HTMLの擬似クラスとは何ですか

青灯夜游
青灯夜游オリジナル
2021-12-23 14:57:106076ブラウズ

HTML では、疑似クラスは、既存の要素が特定の状態 (スライド、クリックなど) にあるときに、対応するスタイルを既存の要素に追加するために使用されるセレクターであり、この状態はユーザーの動作に基づいて動的に変化します。 。一般的に使用される疑似クラスには、「:active」、「:hover」、「:link」、「:root」、「:valid」などが含まれます。

HTMLの擬似クラスとは何ですか

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

疑似クラス: 特定の状態 (スライド、クリックなど) にある既存の要素に、対応するスタイルを追加するために使用されます。この状態はユーザーの動作に基づいて動的に変化します。

私の理解では、それ自体は存在しません。これは、特定の状況 (スライド、クリック) でのみトリガーされる状態です。CSS を使用して、この状態のオブジェクトを変更できます。

例: ユーザーが指定された要素の上にマウスを移動すると、:hover を使用してこの要素の状態を説明できます。これは一般的な CSS に似ており、既存の要素にスタイルを追加できますが、 DOM ツリーでは、スタイルは記述された状態でのみ要素に追加できるため、疑似クラスと呼ばれます。

一般的に使用される疑似クラスは次のとおりです:

  • :active アクティブ化されている要素を選択します (指定された状態と一致します)

  • :hover は、マウスがホバーしている要素を選択します (指定された状態と一致します)

  • :link は、訪問されていない要素を選択します (指定された状態と一致します)

  • :visited 訪問済みの要素を選択します (指定されたステータスと一致します)

  • :first-child 訪問済みの要素を選択しますは親要素の最初の子要素です

  • :lang(value) 指定された lang 属性を持つ要素を選択します

  • :focusキーボード入力フォーカスのある要素

  • :enable 有効なすべての要素を選択します

  • :disable すべての無効な要素を選択します

  • :チェック済み 選択した各要素を選択します

  • #:target 現在のアンカー要素を選択します

  • #:first-of-type その親かどうかを選択します特定のタイプの最初の子要素である要素

  • :last-of-type は、親要素の特定のタイプの最後の子要素である要素を選択します

  • :only-of-type は、親要素の特定のタイプの唯一の子要素である要素を選択します

  • :nth-of-type (n) を満たす要素を選択します。 親要素の特定の型の n 番目の子要素である要素

  • :nth-last-of-type(n) は要素を選択します親要素の最後から 2 番目の要素である特定の型の n 番目の子要素を満たす 要素

  • :only-child は、親要素の唯一の子要素である要素を選択します

  • :last-child は、親要素の最後の要素である要素を選択します。

  • :nth-child( n) 親要素の n 番目の子要素である要素を選択します。

  • #:nth-last-child(n) 下から n 番目の子要素である要素を選択します。親要素

  • :empty 子要素のない要素を選択します

  • :in-range 値が指定された範囲内にある要素を選択しますrange

  • :out-of-range 値が指定された範囲内にない要素を選択します

  • :invalid 値が指定された範囲内にない要素を選択しますは無効です

  • :valid 値が有効な要素を選択します

  • :not(selector) セレクターを満たさない要素を選択します

  • #:optional オプションのフォーム要素を選択します。つまり、「必須」属性がありません。

  • :読み取り専用でフォーム要素を選択します。 "readonly" の場合

  • #:読み取り/書き込みは "readonly" のないフォーム要素を選択します
  • #:root ルート要素を選択します
  • 関連する推奨事項: 「
html ビデオ チュートリアル

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

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