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

css3 セレクターには、「[att^="val"]」、「[att$="val"]」、「[att*="val"]」、「:root」、「 :」が含まれます。 nth-child(n)」、「:last-child」、「:only-child」、「:empty」など。

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

#css3 の新しいセレクター

##属性セレクター (IE6 デバイスを除くほとんどのブラウザーでサポート)

E[att^="val"] 属性 att 値が「val」で始まる要素

# E[att$="val" ] 属性 att 値が「val」で終わる要素

## E

[att*="val "] 属性 att の値には、 「val」文字列の要素

##Example: p [id^="nav"] {background:#000;}
##構造体擬似クラスセレクター (フィルターセレクター)

(注: FireFox 1.5/2.0/3.0 は E:root をサポートし、FireFox 3.0 は E:last-child、E:empty をサポートします。IE6/7/8 はサポートされていないため、使用する適切なシナリオ)

#シリアル番号セレクター意味インスタンス1E:root ドキュメントのルート要素と一致します。HTML ドキュメントの場合、HTML 要素 2E:nth-child(n) 親要素の n 番目の子要素と一致します。最初の番号は 1p:nth-child(3) { color :#f00 ; }3E:nth-last-child(n) 末尾から n 番目の子要素と一致します。親要素、最初の番号は 1p:last-child {background:#ff0; }4E:nth- of-type(n ):nth-child() に似ていますが、同じタグを使用する要素のみに一致しますp:nth-of-type(2){color:red; }親要素 p##5E:nth-last-of-type(n)with:nth- の n 番目の子要素を選択します。 last-child() も同様に機能しますが、同じタグ ##6 ## を使用する要素のみと一致します。 # 親要素の最後の子要素と一致します。nth-last-child(1)7E: first と同等です。 -of-type は、親要素の下で同じタグを使用する最初の子要素と一致します。これは、nth-of-type(1)# と同等です。 E:last-of-typeE:only-child#10E:only-of-type 親要素の下で同じタグを使用する唯一の子要素と一致します。これは、first と同等です。 -of-type:last -of-type または:nth-of-type(1):nth-last-of-type(1)11 E:empty 子要素を含まない要素と一致します。テキスト ノードも子要素とみなされますので注意してください。p:empty {background:#ff0; }

E:last-child
			##8
親要素の下で同じタグを使用する最後の子要素と一致します。これは、nth-last-of- と同等です。 type( 1)			9
は、親要素の下にある唯一の子要素と一致します。これは、 In:first-child:last-child または:nth-child(1):nth-last-child(1)	p:only-child { background:#ff0; }## と同等です。
		# UI ステータス疑似クラス セレクター (IE6/7/8 ではサポートされていません) シリアル番号 セレクター 意味 インスタンス 1 E :enabled 形式のアクティブ化された要素と一致します 2 E:disabled Match形式 input[type="text"]:disabled {background:#ddd; } 3 E:checked 内の無効な要素 形式 4 E: の形式で、選択したラジオ (ラジオ ボタン) またはチェックボックス (チェックボックス) 要素と一致します。 :selection ユーザーが現在選択している要素と一致します レベル要素のユニバーサル セレクター #シリアル番号セレクター意味インスタンス1E ~ F E 要素の後の兄弟 F 要素と一致しますp ~ ul {background:#ff0; }# 逆選択疑似クラス シリアル番号 セレクター 意味 例 1 E:not(s) 一致セレクターの現在の Any 要素と一致しません :not(p) { border:1px Solid #ccc; } #: ターゲット疑似クラス ##シリアル番号 #意味 #1E:target##(学習ビデオ共有: ) セレクター #インスタンス 一致するドキュメント内の特定の「ID」をクリックした後の効果 css ビデオ チュートリアル

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