新手必學：CSS 選擇器的核心概念

在開始你的前端開發旅程時，了解 CSS 選擇器將為你打下穩固的基礎。CSS 選擇器允許我們精確地選擇要套用樣式的 HTML 元素。對於新手而言，學會如何有效率地使用這些選擇器能讓你在設計網頁時如虎添翼。

ID 選擇器用於選擇單一 HTML 元素，其語法是在 ID 名稱前添加一個 #。例如，假設有一個 div 標籤擁有 id="header"，我們便可以這樣為其設置樣式：

#header {
  background-color: #f0f0f0;
  padding: 20px;
}

ID 選擇器的特性是其高優先級，因此在選擇元素時要謹慎使用。

類別選擇器是 CSS 中最常用的選擇器之一，適合多個元素共享相同行為時使用。其語法為 . 加上類別名稱。例如：

<div class="card">內容</div>
<div class="card">更多內容</div>

對應的 CSS 是：

.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
}

當使用類別選擇器時，可以對多個元素應用相同樣式，非常有利於維護和更新。

後代選擇器可以選擇某一 HTML 標籤內的所有層級標籤。透過空格分隔父元素和子元素的選擇器來尋找匹配的子元素。例如：

<ul class="menu">
  <li><a href="#">首頁</a></li>
  <li><a href="#">關於我們</a></li>
</ul>

對應的 CSS：

.menu a {
  text-decoration: none;
  color: #333;
}

後代選擇器可讓你輕鬆管理樹狀結構內的不同層級元素樣式。

CSS 偽類選擇器允許我們根據元素的狀態變化改變其樣式，如懸停、已訪問等狀態。例如，當使用者將滑鼠懸停在鏈結上時，我們可以改變其顏色：

a:hover {
  color: #ff6600;
}

偽類選擇器提供了一種為動態操作和用戶交互設計樣式的便利方法。

組合選擇器是將多個選擇器結合在一起的強大工具。以類別和偽類一起使用為例：

.button.primary:hover {
  background-color: #0066cc;
  color: white;
}

在這段範例中，我們將選中具有 button 和 primary 類別的按鈕，當懸停時改變其樣式。此技巧使得樣式的組合更具適應性和功能性。

屬性選擇器用於選擇指定屬性的元素，不僅提升選擇精準度，也增加靈活性。假設我們想設計所有 target 為 _blank 的鏈結：

<a href="page.html" target="_blank">另開分頁</a>

相對應的 CSS：

a[target="_blank"] {
  cursor: pointer;
  font-style: italic;
}

屬性選擇器在細膩地為 HTML 元素著色方面功不可沒。

通用選擇器 (*) 主要用於選擇文檔中的全部元素，通常用於重置或統一樣式。例如：

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

運用通用選擇器可以有效地讓你快速建立基本樣式，但由於其廣泛覆蓋性，請慎用以免影響效能。

子元素選擇器只會選擇父元素下的直接子元素。這樣可防止選擇到非直系的後裔元素，例如：

<ul class="nav">
  <li>第一項</li>
  <li>第二項</li>
</ul>

對應的 CSS：

.nav > li {
  color: #333;
}

利用這個選擇器可以更精確地限定影響範圍，特別適合層次較深的結構。

相鄰兄弟選擇器 + 會選擇緊接在指定元素後的第一個兄弟元素。例如：

<h1>標題一</h1>
<p>段落內容跟隨標題一。</p>
<h2>標題二</h2>
<p>段落內容跟隨標題二。</p>

對應的 CSS：

h1 + p {
  margin-top: 0;
}

這個選擇器在需要對重複結構進行精細控制時非常有用，特別是處理有間隔需求的元素時。