CSS selectors_html/css_WEB-ITnose のいくつかのレコード

セレクターの例 例 説明 CSS element,elementdiv,pすべての

要素とすべての

要素を選択します。

1element elementdiv p

要素内のすべての 要素を選択します。

1element>elementelement+elementdiv+p

要素の直後にあるすべての 要素を選択します。

2[attribute][target] target 属性を持つ要素をすべて選択します。 2[attribute=value][target=_blank] target="_blank" を持つ要素をすべて選択します。 2[attribute~=value][title~=flower] title 属性に単語「flower」が含まれる要素をすべて選択します。 2[attribute|=value][lang|=en] lang 属性値が "en" で始まるすべての要素を選択します。 2:linka:link未訪問のリンクをすべて選択します。 1:訪問済みa:訪問済み訪問済みのリンクをすべて選択します。 1:activea:activeアクティブなリンクを選択します。 1:hovera:hover マウスポインターが置かれているリンクを選択します。 1:focusinput:focus フォーカスを取得する入力要素を選択します。 2:first-letterp:first-letter 各

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

1:first-linep:first-line 各

要素の最初の行を選択します。

1:first-childp:first-child 親要素の最初の子であるすべての

要素を選択します。

2:beforep:before:lang( language)p:lang(it) "it" で始まる lang 属性値を持つすべての

要素を選択します。

2element1~element2[attribute^=value][attribute$=value][attribute*=value]:first-of-typep:first-of-type:last-of-typep:last-of-type 親の最後の

要素であるすべての

要素を選択します。

:only-of-typep:only-of-type3333:nth-of-type(n)p:nth-of-type(2) 親の 2 番目の

要素に属するすべての

を選択します。要素。

3:nth-last-of-type(n)p:nth-last-of-type(2) 上記と同じですが、最後の子要素から数え始めます。 3IE6

.class	.intro	class="intro" を持つすべての要素を選択します。	1
#id	#firstname	id="firstname" を持つ要素をすべて選択します。	1
*	*	すべての要素を選択します。	2
element	p	すべての 要素を選択します。	1
div>p	親要素が であるすべての 要素を選択します。	2
	各 要素のコンテンツの前にコンテンツを挿入します。 content 属性値:	string, url, counter(name)counter(name, list-style-type)counters(name, string) counters(name, string, list-style-type), attr(X),開始引用、終了引用、 開始引用なし、終了引用なし	2
:after	p:after	各 要素のコンテンツの後にコンテンツを挿入します。	2
p~ul	要素が先行するすべての 要素を選択します。	3
a[src^="https"]	src 属性値が「https」で始まるすべての 要素を選択します。	3
a[src$=".pdf"]	src 属性が「.pdf」で終わるすべての 要素を選択します。	3
a[src*="abc"]	src 属性に部分文字列「abc」が含まれるすべての 要素を選択します。	3
親の最初の 要素である各 要素を選択します。	3
3			親の唯一の 要素であるすべての 要素を選択します。
	:only-child	p:only-child	親要素の唯一の子要素である各 要素を選択します。
	:nth-child(n)	p:nth-child(2)	親要素の 2 番目の子であるすべての 要素を選択します。
	:nth-last-child(n)	p:nth-last-child(2)	最後の子要素から数えて上記と同じ。
:last-child	p:last-child	親要素に属する最後の子要素である各 要素を選択します。	3
:root	:root	ドキュメントのルート要素を選択します。	3
:empty	p:empty	子要素を持たないすべての 要素 (テキスト ノードを含む) を選択します。	3
:target	#news:target	現在アクティブな #news 要素を選択します。	3
:enabled	input:enabled	有効な 要素をそれぞれ選択します。	3
:disabled	input:disabled	無効になっている各 要素を選択します	3
:checked	input:checked	選択した各入力要素を選択します。	3
:not(selector)	:not(p)	要素ではないすべての要素を選択します。	3
::selection	::selection	ユーザーが選択した要素の部分を選択します。設定できる属性は 2 つだけです。1 つは背景、もう 1 つは色属性です。	3
css3.info Web サイトでは、現在のブラウザと CSS セレクターの互換性をテストできます。テストには、:hover、:active、:focus、:selection、:visited、:link は含まれません。		IE8	IE7

参考資料:

http://www.w3school.com.cn/cssref/css_selectors.asp CSS セレクター リファレンス マニュアル
http://www.w3cplus.com/css3/basic-selectors CSS3 セレクター— —基本セレクター
http://www.w3cplus.com/css3/attribute-selectors CSS3 セレクター — 属性セレクター
http://www.w3cplus.com/css3/pseudo-class-selector CSS3 セレクター — —擬似クラス セレクター
http: //www.w3cplus.com/content/css-selection CSS::Selection
http://ued.ctrip.com/blog/?p=2545 CSS セレクターを使用してページのコンテンツに挿入します