在前幾天，我們已經的介紹了網頁「骨架」與語義化標籤，並認識 CSS的用途。當頁面上有很多元素時，如何告訴瀏覽器「這段樣式要套給誰」？答案就是 選擇器（selector）。
今天我們來詳細介紹CSS的選擇器

1. 基本選擇器（最常用）

元素選擇器：直接以元素名稱為目標（例如全部段落、全部標題）
範例（代表意義）：
p { color: blue; }
→ 意味著「所有段落文字變藍色」。
類別選擇器（class）：針對屬於同一類別的元素套樣式
範例：
.highlight { background: yellow; }
→ 只有被標記為 highlight 的元素會有黃色底。
ID 選擇器（id）：針對單一、獨特的元素套用，通常頁面上只會有一個
範例：
#mainTitle { font-size: 32px; }
→ 只有那個獨一無二的標題會變大。

2. 群組選擇器（一次套到多個）

當多個不同元素需要相同設定時，用逗號連接可省事
範例：
h1, h2, p { font-family: Arial, sans-serif; }
→ 一次把標題與段落都設為同一字體。

3. 巢狀選擇器（定位子元素）

想只針對「某個容器裡的指定元素」才套樣式，可用階層表示法：
空格表示「子孫元素（不限深度）」
container p { color: green; }
→ 只有在 container 內的段落會變綠。
>表示「直接子元素」
container > p
→ 只有 container 的直接子段落會被選中。

4. 常見補充

萬用選擇器 *：選到所有元素，常用來重設預設間距
* { margin: 0; padding: 0; }
偽類（pseudo-classes）：像是 :hover，可控制滑鼠互動時的效果
例如 a:hover
選擇器權重（specificity）：ID 的優先度通常高於 class，再來是元素。掌握權重可避免樣式被覆蓋。

接下來要知道CSS 的放置位置（程式碼裡）

外部 CSS 檔案（最推薦）

建立一個 .css 檔，例如 style.css
所有選擇器和樣式都寫在這個檔案裡，例如：
p { color: blue; }
.highlight { background: yellow; }
#mainTitle { font-size: 32px; }
優點：同一份 CSS 可以套用多個網頁，維護方便

內部 CSS（程式碼開頭）

可以在程式碼一開始的樣式區塊寫選擇器，例如：
h1, h2, p { font-family: Arial, sans-serif; }
div p { color: green; }
優點：網頁專用，不需要外部檔案，但大網站不方便

行內 CSS（不建議）

直接在元素上指定樣式，例如：
color: red;
font-size: 20px;
優點：快速測試用
缺點：無法用選擇器套給多個元素，只能一個一個寫

小重點:
選擇器要寫 在 CSS 程式碼區域，而不是 HTML 裡
建議方式：外部 CSS 檔案，所有元素、類別、ID 的樣式都寫在裡面，方便管理和重複使用
如果只是簡單測試，可以寫在程式碼開頭的 內部 CSS 區塊