疑似クラスセレクターの概要

PHP中文网
リリース: 2017-06-19 17:36:39
オリジナル
3433 人が閲覧しました

疑似クラスセレクターの概要

疑似クラスセレクターには構造的疑似クラス、UI疑似クラス、動的疑似クラス、その他の疑似クラスの4種類があります
  1. 。構造擬似クラスセレクター 構造擬似クラス選択 ドキュメント内の位置に基づいて要素を選択できます。このような要素には接頭辞「:」が付きます
    1。ルート要素セレクターは html などの下部タグでのみ機能します。 ...
    :root

    2. すべての子要素を選択するには、子要素セレクターをより詳細にする必要があります。 gt;li:last-child{ } 最後の子

    ul> ;li:only-child{ } 疑似クラスonly-childを追加します 1つだけを持つものは唯一の子に影響します

    div>p:only-of type{ } 疑似クラスonly-of-typeを追加します 指定された要素のサブ要素を選択します実際、この関数は単一の div>p の関数と似ています

    3. ul>li:nth-child(2) { } li の 2 番目の子要素。 ul

    ul>li:nth-last-child(2)

    UI疑似クラスセレクター

    :enable

    :disable

    htmlファイル

    cssファイル

    効果
  2. :checked 有効な

    htmlファイル


    cssファイル

    がチェックされ、非表示になります

    :def ault デフォルトは有効ですが、ほとんど使用されません

    cssファイル

:val idが正当な場合に有効

:invalid 不正な場合に有効

htmlファイル

cssファイル

正しい数字を入力すると回転しますgreen.

:必須 有効にするために一部を入力します

オプション いいえ 有効にする必要があります

html ファイル

css ファイル


a:link テキストに基づいて動作しますタグ間

input:focus

テキスト入力の切り替え カーソルと入力ボックスの色が変わりました

その他の疑似クラスセレクター

:not アンチセレクションの重要なポイントに焦点を当てます

baidu を含まないハイパーリンクは赤色になります

:empty Word のスペースの置換に似た、空のタグとして機能します

html ファイル

置換前

cssファイル

一部の空の部分に影響を与えたくない場合は、

p:empty{ }のようなものを指定できます。そうすれば、CSSは空のタグにのみ影響しますunder p

Replace After

:lang

:target ページ内にアンカーポイントを配置すると、特定の位置がすぐに有効になります

名前または id を使用でき、アンカー ポイントは任意のラベルに設定できます。ハイパーリンク については、 #anchor 名をブラウザに直接入力しても同じ効果があります。 href.

テストするときは、最後に「#アンカー名」を追加してください

その効果(実際には、アンカーの位置は非常に長いページにあることが多く、1点に配置できます)そして端が赤くなります。)

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート