阿嬤都看得懂的基礎 CSS 選擇器

小孩子才做選擇，我全都要！ －民明書房《我那被限制住的想像》

昨天我們把重複的 CSS 樣式收整在一起，然後再把所有想要套用這個樣式的標籤，都指定成 class = "gavagai"。

這樣是看起來清爽多了，不過，我們該怎麼告訴瀏覽器，這些樣式都屬於叫作 gavagai 的這個分類呢？熟悉集合論的阿嬤會知道，我們使用花括弧 {} 來把一堆東西打包起來，也可以直接寫出這堆東西都具備什麼性質。例如，我們可以定義人類這個分類：

人類 = {這樣的東西 | 這個東西有兩隻腳 而且 這個東西沒有長羽毛}

不過，在 CSS 當中的寫法比較簡單，我們在花括弧的前面加上這堆東西的類別名稱 (class name)，再在類別名稱前面加上半型句點 "."，然後在花括弧內寫上屬性，就可以囉！以昨天的 4 個區塊為例，寫起來會看起來像這樣：

	.gavagai{
		margin:2px;
		height:100px; 
		width:100px; 
		background-color:red; 
		color:white; 
		text-align:center; 
		line-height:100px;
	}

為什麼我們需要在類別名稱前面加上半型句號 "." 呢？因為 CSS 樣式不只有類別 class 這種選擇要把樣式加到哪些標籤的方式。想想看，除了類別以外，我們還有哪些把標籤分堆的方式呢？沒錯，我們原本就有 p 標籤啊、h1 標籤啊、 span 標籤、div 標籤。因此，我們還有種把 CSS 樣式指定到一堆標籤的方式，也就是：

• 標籤名稱 (tag name)。使用標籤名稱時，前面不用加上任何符號，直接使用就可以了。例如，當我們想把所有 span 標籤都指定文字為紅色的樣式時，就可以這樣寫：

	span{
		color: red;
	}

這時候，我們就會發現所有被 span 標籤包起來的文字，都會變成紅色囉！

由於這個放在花括弧前的分堆名稱，無論是類別名稱，或者標籤名稱，都可以將花括弧中的 CSS 樣式應該指定給哪堆 HTML 標籤，給選擇出來，因此，這個分堆的名稱格式，就稱作「CSS 選擇器」(CSS selector)，那麼，我們還有哪些常見好用的 CSS 選擇器呢？

或許你會很意外，我們還可以指定標籤的

• id喔！沒錯，我們可以給予 HTML 標籤身份證字號！就像人類的身分證字號那樣，給予 HTML 標籤的 id 應該要是獨一無二的。不過，即使我們發給 2 個以上的標籤同樣的 id，其實瀏覽器也不會爆炸，只是到時候自己會很不方便而已。使用 id 給定樣式時，我們的 CSS 選擇器格式，是在名稱前面加上井字號 "#"。使用 id 給定的 html 和 css 分別是這樣寫：

	<div id="Logos"></div>

	#Logos{
		height:100px;
		width:100px;
		baclground-color:gold;
	}

最後，假使我們想要無差別地指定所有標籤，該怎麼辦呢？還好我們有

• 萬用選擇器 (universal selector)。既然是無差別地指定所有標籤，當然也就不會有任何名稱，而是使用星號 "*" 作為我們的萬用字元。萬用選擇器寫起來會是像這樣的：

*{
	background-color: purple
}

這樣，就會發現所有元件的背景顏色，都變成紫色囉！

不過，這些抽出來的 CSS 樣式應該放在哪裡呢？當然不是放在指定那個類別的 HTML 標籤中，因為我們就是不想重複寫行內樣式，才把 CSS 樣式另外用分類的方式拉出來寫吧！可是，我們也不太可能把 CSS 樣式寫在 HTML 標籤外，不然可能會被瀏覽器當成一般文字。那到底該怎麼辦呢？

我們的策略，是另外用一種特殊的 HTML 標籤來處理。這些特殊的 HTML 標籤本身不會被渲染出來，而是告訴瀏覽器怎麼渲染這些元件。至於我們應該使用哪個標籤，就留待明天介紹囉！

想一想：

1. CSS 選擇器的功能是將標籤分堆，這對於日後我們學習使用 JavaScript 操縱網頁元件的時候，會有什麼幫助嗎？
2. 各位阿嬤覺得上述這些基礎的 CSS 選擇器夠用嗎？還是會想要其他哪些選擇器，幫助我們更靈活地將標籤分堆呢？