CSS セレクター Notes_html/css_WEB-ITnose

著者: Ruan Yifeng

日付: 2009 年 3 月 12 日

昨年 jQuery を学習していたとき、セレクターについていくつかメモを書きました。

ここ数日で取り出して見てみたら、多くのことを忘れていたことに気づきました。そこで、後で簡単に参照できるように、ここに投稿することにしました。これは他の友人にも役立つはずです。結局のところ、セレクターは Web ページ効果を作成するための最初のステップです。

メモは 2 つの部分に分かれています。今日は CSS セレクターであり、今後 xPath セレクターの部分も含まれる予定です。今日のメモには 44 個のセレクターが含まれており、基本的に CSS 2 と CSS 3 のすべての規定をカバーしています。

======================

CSS セレクターのメモ

主催: Yifeng

参考 Web サイト: 456 Berea Street

基本的なセレクター

シリアル番号	セレクター	意味
1.	*	ユニバーサル要素セレクター、任意の要素に一致
2.	E	タグセレクター、E 要素を使用してすべてのタグに一致します
3.	.info	class セレクター、class 属性に情報を含むすべての要素と一致します
4.	#footer	id セレクター、footer 要素と等しいすべての id 属性と一致します

例:

* { マージン:0; パディング:0; }

.info { 背景:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info {background:#ff0; }

2.要素組み合わせセレクター

シリアル番号

セレクター

意味複数要素セレクター、すべての E 要素または F 要素に一致、E と F はカンマで区切られます子孫要素セレクター、E 要素の子孫であるすべての F 要素に一致します、E と F はスペースで区切られます子要素セレクター、一致します。すべての子要素 ​​F E 要素の直後にあるすべての兄弟要素 F に一致します 例: #nav li { 表示:インライン; }

	5.	E,F
	6.	E F
	7.	E > ; F
	8.	E + F
		div p { color:#f00 }

#nav a { font-weight:bold; }

div > { color:#f00 ; }

3. CSS 2.1 属性セレクター

シリアル番号

selector

意味

9.10.11.p[title] { color:#f00; }div[class=error] { color:#f00; }td[headers~= Col1] { color:#f00; }p[lang|=ja] { color:#f00; }blockquote[class=quote][cite] { color:#f00; }4.

E[att]	その値に関係なく、すべての E 要素を att 属性と照合します。 (注: ここでの E は、"[cheacked]" のように省略できます。以下と同じです。)
E[att=val]	att 属性が " に等しいすべての E 要素と一致します。 val"
E[att~=val]	att 属性にスペースで区切られた複数の値があり、そのうちの 1 つが "val" に等しいすべての E 要素と一致します。 E[att|= val]	att 属性にハイフンで区切られた複数の値があり、そのうちの 1 つが "val" で始まるすべての E 要素と一致します。 主に "en"、"en-us" などの lang 属性に使用されます。 "en-gb" など
例:

シリアル番号

selector

意味

13.

E:first-child

親要素の最初の子要素と一致する

例:

p:first-child { font-style:italic; }

input[type=text]:focus { color:#ffe }

input[type=text]: focus:hover {background:#fff; }

q:lang(sv) { quotes: "201D" "2019" "2019"; }

5. CSS 2.1 の擬似要素

14.	E: リンク	クリックされていないすべてのリンクと一致します
15.	E:visited	クリックされたすべてのリンクと一致します
16.	E:active	マウスが押されたリンクと一致します 、されていない要素まだリリースされていません
17.	E:hover	マウスがホバーしているE要素と一致します
18.	E:focus	現在フォーカスがあるE要素と一致します
19.	E:lang(c)	lang 属性が c と等しい E 要素と一致する

E 要素の 1 文字と一致する22.E:beforeE 要素の前に生成されたコンテンツを挿入します23.E:after E 要素の後に生成されたコンテンツを挿入します

番号	セレクター	意味
20.	E:first-line	E要素の最初の行と一致
21.	E:first-letter

例：

p :first-line { font-weight:bold; #600; }

.preamble:first-letter { font-size:1.5em; }

.cbb: before { content:" "; 表示:ブロック; 高さ:17px; 幅:18px; 背景:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }

a:link:after { content: " (" attr(href) ") "; }

6. 兄弟要素の CSS 3 ユニバーサル セレクター

シリアル番号selector意味24.E ~ F

	任意の FE 要素に一致するものE 要素の後

P ~ UL {background:#ff0;}

	セレクター	意味
25.	E[att^="val "]	属性att値が"val"で始まる要素
26.	E[att$="val" "]	属性att値が"val"で終わる要素
27 .	E[att*="val"]	属性 att 値に文字列 "val" が含まれる要素

例:

div[id^="nav"] {background:#ff0; }

8. CSS 3 のユーザー インターフェイスに関連する疑似クラス

シリアル番号	selector	意味
28.	E:enabled	フォーム内のアクティブ化された要素と一致します
29.	E:disabled	フォーム内の無効な要素と一致します
30.	E:checked	フォーム内の選択されたラジオ (ラジオ ボタン) またはチェックボックス (チェックボックス) 要素と一致します
31.	E::selection	ユーザーが現在選択している要素と一致します

例:

input[type="text"]:disabled {background:#ddd; }

9. CSS 3 の構造擬似クラス

シリアル番号	セレクター	意味
32.	E:root	はドキュメントのルート要素と一致します。HTMLドキュメントの場合は、HTML要素です
33.	E:nth-child(n)	のn番目の子と一致しますその親要素 Element、最初の番号は 1
34.	E:nth-last-child(n)	親要素の最後から n 番目の子要素と一致、最初の番号は 1
35 .	E:nth-of-type(n)	:nth-child() に似ていますが、同じタグを使用する要素のみに一致します
36.	E:nth-last-of - type(n)	は :nth-last-child() に似ていますが、同じタグを使用する要素のみと一致します
37.	E:last-child	は親の最後の子要素と一致しますelement 、次と同等:nth-last-child(1)
38.	E:first-of-type	は、親要素の下で同じタグを使用する最初の子要素と一致します、次と同等:nth-of -type(1)
39.	E:last-of-type	親要素の下で同じタグを使用する最後の子要素と一致します。これは、:nth-last-of-type(1 と同等) )
40.	E:only-child	親要素の下にある 1 つの子要素のみと一致します。first-child:last-child または:nth-child(1):nth-last-child と同等です。 ( 1)
41.	E:only-of-type	は、親要素の下で同じタグを使用する唯一の子要素と一致します。first-of-type:last-of-type または: nth -of-type(1):nth-last-of-type(1)
42.	E:empty	は、子要素を含まない要素と一致します。テキスト ノードも考慮されることに注意してください。子要素

例:

p:nth-child(3) { color:#f00; }

p:nth-child(odd) { color:#f00; } (偶数) { color:#f00; }

p:nth-child(3n+0) { color:#f00; }

p:nth-child(3n) { color:#f00; } nth -child(2n+11) { 背景:#ff0; }

tr:nth-last-child(2) { 背景:#ff0; }

p:last-child { 背景:#ff0; p :only-child { 背景:#ff0; }

p:empty { 背景:#ff0; }

10. CSS 3 アンチセレクション疑似クラス

シリアル番号

セレクター

意味 43.E:not(s)現在のセレクターと一致しない要素と一致します例:

		:not(p) { border:1px Solid #ccc }

イレブン、:CSS 3のtarget擬似クラス

シリアル番号

selector

意味44.E:target の特定の「id」をクリックした場合の効果と一致します文書このセレクターの詳細な説明と例は HTML DOG を参照してください。 (了)