css3 の新しいセレクターとは何ですか?

Css3 の新しいセレクター: "[attribute^=value]"、"[attribute$=value]"、"[attribute*=value]"、":first-of-type"、" :root" 、「:empty」、「:target」など。

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

1. 属性セレクター:

1, [attribute^=value] 属性値が指定された値で始まるすべての要素と一致します。

2, [attribute$=value] 属性値が指定された値で終わるすべての要素と一致します。

3, [attribute*=value] 属性値に指定された値が含まれるすべての要素と一致します。

2. 疑似要素と疑似クラスのセレクター:

## の最初の p 要素親の最後の p 要素である各 p 要素を選択します。3:only-of-typep:only-of- type各 p 要素がその親である唯一の p 要素を選択します3:only-childp :only-child親の唯一の子要素である各 p 要素を選択します3:nth-child(p:nth-child(2)親の 2 番目の子要素である各 p 要素を選択します3:nth-last-child(p:nth-last-child(2)それぞれを選択 p 要素は最後の子から数えて、その親の 2 番目の子要素3:nth-of-type(p:nth-of-type(2)親の 2 番目の p 要素である各 p 要素を選択します3:nth-last-of-type(p:nth-last-of-type(2) 各 p 要素を選択すると 2 番目の p になります。最後の子から数えて親の要素 3:last-childp:last-child親の最後の子である各 p 要素を選択します。 3:root:rootドキュメントのルート要素を選択します3:emptyp:empty子を持たないすべての p 要素 (テキスト ノードを含む) を選択します3 :target#news:target現在アクティブな #news 要素 (アンカー名を含むクリックされた URL) を選択します。 ##:enabledinput:enabled有効な各入力要素を選択します#:disabled#無効化された各入力要素を選択します##3 #:checkedinput:checked選択した各入力要素を選択します3:not():not(p)##3##ユーザーによって選択または強調表示された一致する要素の部分: 範囲外:out-of-range 指定された範囲外の値を持つ入力要素と一致します 値が指定された範囲内にある入力要素と一致します 読み取り可能および書き込み可能な要素を照合するために使用されます 「readonly」属性が設定された要素と一致するために使用されます は、オプションの入力要素と一致するために使用されます# # 「required」属性を持つ要素を照合するために使用されます。 set3:valid :valid は、次の目的で使用されます。入力値が正当な要素と一致する ##333. レベルセレクター: E~F (学習ビデオ共有: css ビデオ チュートリアル

セレクター	Example	サンプルの説明	CSS
:first-of-type	p:first-of-type	各 p 要素を親として選択しますlevel	3
:last-of-type	p:last-of-type
n)
n)
n)
n)
		3
	##3		#input:disabled
	selector		#p 要素ではないすべての要素を選択します
#: :selection::selection	##3
##3		:in -range	:in-range
3		:read- write	:read-write
3		:read-only	:read-only
3		:optional	:optional
3		:required	:required
	:invalid	:invalid	不正な入力値を持つ要素と一致するために使用されます
	ユニバーサル セレクター (後続のすべての兄弟要素を検索)	一致する F 要素と、一致する E 要素の後のすべての要素を選択します。一致する F 要素

)

以上がcss3 の新しいセレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。