css3 にはどのような新しいセレクターが追加されますか?

css3 の新しいセレクターは次のとおりです: ":first-of-type"、":last-of-type"、":last-child"、":root"、":empty"、" : target」、「:enabled」、「:disabled」、「:valid」など。

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

CSS を使用して HTML ページ内の要素を 1 対 1、1 対多、または多対 1 で制御するには、CSS セレクターを使用する必要があります。

HTML ページ内の要素は、CSS セレクターを通じて制御されます。

CSS セレクターは、スタイルを設定する要素のパターンを選択するために使用されます。

css3 の新しいセレクター

CSS3 の新しいセレクターは、主に属性セレクター、関係セレクター、構造化擬似セレクターに分かれています。クラス セレクターと疑似要素セレクターのカテゴリ具体的な概要は次のとおりです:

1. 属性セレクター

属性セレクターは、属性と属性に基づいて作成できます。 Web ページのマークの値を使用してマーカーを選択します。

属性セレクターには、主に E[att^=value]、E[att$=value]、および E[att*=value]これら 3 つの性別セレクターです。

2. リレーションシップ セレクター

CSS3 のリレーションシップ セレクターには、主に子孫セレクターと兄弟セレクターが含まれます。

(1)関係セレクター

(2)隣接兄弟セレクター

(3)通常の兄弟セレクター

3. 構造 構造化された擬似クラス セレクター

構造化された疑似クラス セレクターを使用すると、ドキュメント内の class 属性と id 属性の定義を減らし、ドキュメントをより簡潔にすることができます。

4. 擬似要素セレクター

擬似要素セレクターは通常、英語のコロン「:」が続くマークです。擬似要素の名前です。

css3 新しいセレクター リスト

#セレクター例例の説明CSS# #element1 要素 [^=値]3attribute value]## で始まる各要素を選択します#a[src$=".pdf"][*=]a[src*="44lan"]:first-of-typep:first-of-type最初の

要素 (各 要素がその親となる) ##3

要素は最後の

3

要素が親である

3各 この要素はその親の唯一の子要素ですp:n 番目の子(2)親要素の 2 番目の子要素である

要素をそれぞれ選択しますp:nth-last-child(2)各

要素を選択すると、2 番目の子になります。最後の子から数えて、親の要素 p:nth-of-type(2)各

要素は、その親の 2 番目の p:nth-last- of-type(2)各

この要素は、最後の子から数えて、親の 2 番目の 各 ##:root

3:target#:checkedinput:checked選択した各入力要素を選択します3:not():not(p)すべての not要素の要素3:範囲外:範囲外 一致 inputelements の値が指定された範囲外です# と一致するために使用されます##3

##element2##p~ul		##3# の後の各 ul 要素を選択します	属性
a[src^="https"] src 属性値が「https」		##[	$=
src 属性値が「.pdf」で終わる各要素を選択します3		attribute	value
src 属性値に次の値が含まれる各要素を選択します。部分文字列 "44lan"3
		:last-of-type p:last-of-type	各選択
親の要素		:only-of-type p:only-of-type	各
要素のみを選択します		##:only-childp:only-child	< ;P>
3		:n 番目の子(n)
3		#:nth-last -child(n)
3		:nth-of-type(n)
要素です	3	#:nth- last-of-type(n)
要素です	3	:last-childp:last-child	親の最後の子である要素。
3		:root ドキュメントのルート要素を選択します	3
:empty	p:empty	子を持たないすべての	要素を選択します ( Text ノードを含む)
		#news:target 現在アクティブな #news を選択します要素 (このアンカー名を含むクリックされた URL)	3
:enabled	input:enabled	各有効を選択input 要素	3
:disabled	input:disabled	無効になっている各入力要素を選択します	3
selector
3	::selection	::selection は、一致する要素または強調表示された部分でユーザーによって選択されます
		<	>
3
:in-range	:in-range	指定された間隔内の値と一致します <input>要素	3
:読み取り-書き込み	:read-write	読み取り可能および書き込み可能な要素を照合するために使用されます	3
:read-only	: 読み取り専用	「readonly」属性が設定された要素と一致するために使用されます	3
:optional	:optional	は、オプションの入力要素と一致するために使用されます。	3
:required	:required	要素を一致させるために使用されます。 "required" 属性セット	3
:valid	:valid	マッチングに使用されます入力値は有効な要素です	3
:invalid	:invalid	は、入力値が無効な要素である

拡張知識: css1、css2 セレクター リスト

セレクター例例の説明CSS..introclass="intro"1#firstnameid="firstname" を持つすべての要素を選択します1**すべての要素を選択します2##要素##element,elementdiv p1##

要素

#element># #elementelementdiv pattribute#[target]ターゲット属性を持つすべての要素を選択##2=][target=_blank]target= "_blank" の要素を使用してすべて選択します2~=][title ~=flower]title 属性に単語「花」2|= ][lang| =en]開始値が lang 属性="EN"2 であるすべての要素を選択しますa:link未訪問のリンクをすべて選択1:visiteda:visited選択訪問したすべてのリンク1:activea:activeアクティブなリンクを選択1#:hover#a:hover##1フォーカスのある入力要素を選択します::first-letter各

要素の最初の文字を選択します

##::first-linep:first-linep:::前p::前::afterp: :after ::lang()p:lang(it)開始値が lang 属性="it"

class
id	を持つすべての要素を選択します
p	すべて選択	1
##div,pすべてを選択 element および element	1		##element element
すべて選択 elements	#div>p	内の
element## すべて選択 要素を親とする 要素 #2
要素の直後にあるすべての 要素を選択します2	[	]
#[attribute	value
[attribute	value
[属性	言語
:link
#マウスがリンク上にあるときの選択		#:focus	input:focus
2		::first -letter	p
		1
:	それぞれの最初の行を選択します 要素	1	#: :first-child
:first-child	# 要素がその親のみのスタイルの最初の子であることを指定します。 2
	各 要素の前にコンテンツを挿入します。 2
	各 要素の後にコンテンツを挿入します 2		language
	2 であるすべての 要素を選択します	(学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド )

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