CSS 選擇器 (Selectors)

選擇器是用來指定 CSS 樣式要套用到哪些 HTML 元素上。CSS 提供了多種選擇器，讓你可以精準地選取想要的元素。

元素選擇器 (Element Selector)

直接用 HTML 標籤名稱作為選擇器，會選取頁面上所有該標籤的元素。

p {
  color: blue;
}

這會將所有 <p> 元素的文字顏色設為藍色。

h1 {
  font-size: 32px;
}

這會將所有 <h1> 元素的字體大小設為 32px。

Class 選擇器 (Class Selector)

用 . 加上 class 名稱作為選擇器，會選取所有帶有該 class 的元素。

.highlight {
  background-color: yellow;
}

<p class="highlight">這段文字會有黃色背景</p>
<p>這段文字沒有黃色背景</p>
<span class="highlight">這個 span 也有黃色背景</span>

一個元素可以有多個 class，用空格分隔：

<p class="highlight large">這個元素同時有兩個 class</p>

.highlight {
  background-color: yellow;
}

.large {
  font-size: 24px;
}

ID 選擇器 (ID Selector)

用 # 加上 id 名稱作為選擇器，會選取帶有該 id 的元素。

#header {
  background-color: black;
  color: white;
}

<div id="header">網站標題</div>

通用選擇器 (Universal Selector)

用 * 作為選擇器，會選取頁面上的所有元素。

* {
  margin: 0;
  padding: 0;
}

這個範例會將所有元素的外距和內距都設為 0，常用於重置瀏覽器的預設樣式。

群組選擇器 (Grouping Selector)

當多個選擇器要套用相同的樣式時，可以用逗號 , 將它們組合在一起。

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

這等同於分開寫三個規則，但更簡潔。

選擇器組合

你可以組合不同的選擇器來更精確地選取元素。

元素 + Class

選取特定標籤且帶有特定 class 的元素：

p.intro {
  font-size: 18px;
}

這只會選取 <p class="intro">，不會選取其他帶有 intro class 的元素。

多個 Class

選取同時帶有多個 class 的元素：

.box.large {
  width: 500px;
}

這會選取同時帶有 box 和 large 兩個 class 的元素：

<div class="box large">這個會被選取</div>
<div class="box">這個不會被選取</div>

選擇器總覽