3-2. 認識 CSS 選取器

基本選取器

NO	選取器	舉例	說明	版本	英文參考網	簡中參考網
1	*	*	萬用選取器, 代表了所有的選取器。	2	w3schools	runoob
2	tag標籤名稱	body	針對HTML標籤元素名稱當選取器。	1	w3schools	runoob
3	#ID名稱	#content	針對HTML標籤元素設定的ID名稱當選取器。	1	w3schools	runoob
4	.class類別名稱	.container	針對HTML標籤元素設定的class類別名稱當選取器。	1	w3schools	runoob
5	選取器 , 選取器	div , p	同時設定多個選取器。	1	w3schools	runoob

NO	選取器	舉例	說明	版本	英文參考網	簡中參考網
1	選取器選取器	header img	定義指定外層選取器 header 內的 "子" "孫" 元素 img 當選取器。	1	w3schools	runoob
2	選取器 > 選取器	header > img	定義指定外層選取器 header 內的 "子" 元素 img 當選取器。	2	w3schools	runoob
3	選取器 + 選取器	header + div	定義緊接在 header 後方同一層的元素 div 當選取器。	2	w3schools	runoob
4	選取器 ~ 選取器	header ~ div	定義在 header 後方同一層的所有元素 div 當選取器。	3	w3schools	runoob

NO	選取器	舉例	說明	版本	英文參考網	簡中參考網
1	:link	a:link	連結標籤元素未點選存取時。	1	w3schools	runoob
2	:visited	a:visited	連結標籤元素已點選存取過。	1	w3schools	runoob
3	:hover	a:hover	連結標籤元素當滑鼠滑入上方時。	1	w3schools	runoob
4	:active	a:active	連結標籤元素當滑鼠在上方按著未放時。	1	w3schools	runoob
5	:focus	a:focus	使用滑鼠或鍵盤讓焦點停在元素上時。	2	w3schools	runoob