CSS 的主要選擇器

1. 類型選擇器 (Type Selectors)

CSS 中的選擇器可以選取 HTML 元素，並為其應用樣式。掌握主要的選擇器，可以更有效率地選取頁面上的元素，讓 CSS 成為強大的工具來設計網頁內容。在這篇文章中，我們會介紹主要的選擇器類型：類型選擇器（Type Selectors）、類別選擇器、ID 選擇器、群組選擇器和通用選擇器。

類型選擇器會選取所有特定標籤的元素。例如，如果我們需要為頁面上的所有段落應用樣式，可以使用類型選擇器搭配 <p> 標籤。

p {
  color: blue;
  font-size: 16px;
}

<p>這段文字會是藍色的，字體大小是 16 像素。</p>
<p>第二段也會有相同的樣式。</p>

類型選擇器很有用，當需要為某一類型的所有元素應用樣式時，例如所有標題或段落。它可以統一控制一組元素的外觀，也能讓網站維護更輕鬆。

2. 類別選擇器 (Class Selectors)

類別選擇器用於選取具有特定 class 屬性值的元素。類別以點號 (.) 加類別名稱來表示。一個類別可以用於多個元素，能讓多個元素應用相同的樣式。

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">這段文字在黃色背景上會有藍色字體。</p>
<p>一般文字，沒有類別樣式。</p>
<div class="highlight">這個區塊也會應用 highlight 類別的樣式。</div>

類別選擇器非常靈活，因為它能創建樣式並應用在不同元素上。當需要設計一組無關的元素時，類別特別有用。

3. ID 選擇器 (ID Selectors)

ID 選擇器用於選取具有特定 id 屬性值的元素。ID 使用符號 # 加名稱來表示。與類別不同，ID 必須在頁面中唯一，這使得它非常適合用來設計如標題或導導航板等獨特的元素。

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">頁面標題</h1>
<p>這段文字不會被 ID 選擇器影響。</p>

ID 選擇器僅對頁面中的單一元素應用樣式，因此非常適合為獨特元素提供具體樣式。

4. 群組選擇器 (Group Selectors)

群組選擇器允許一次為多個元素應用相同的樣式。這可以通過逗號將多個選擇器組合成一個 CSS 規則來實現。群組選擇器簡化了代碼，因為它可以為多種類型的元素設置通用樣式。

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

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<p>這段文字不會受到群組選擇器的影響。</p>

群組選擇器能有效減少 CSS 代碼，並簡化樣式設置，特別是在需要為不同類型的元素（如各級標題）應用相同的屬性時。

5. 通用選擇器 (Universal Selectors)

通用選擇器以星號 (*) 表示，可以選取頁面上的所有元素。這是一個很強大的工具，可以快速為所有元素設置基礎樣式，例如統一間距或設置標準字體。通用選擇器非常適合用於樣式重置（reset），當需要移除瀏覽器默認的間距和邊距時，通用選擇器就派上用場了。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>標題</h1>
<p>零間距和邊距的段落文字。</p>
<div>零間距和邊距的容器。</div>

在這個例子中，通用選擇器為所有元素重置了間距和邊距，有助於保持頁面樣式的一致性。這種方式在 CSS 代碼的開頭用於創建統一設計風格時非常常見。