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 サイトの他の関連記事を参照してください。