網頁設計中，CSS 是一種用來控制網站外觀和佈局的工具。CSS 選擇器是 CSS 的核心部分，用於選擇網頁中的 HTML 元素，並為這些元素套用樣式。

通用選擇器

通用選擇器通常用於 CSS 重置樣式，將所有元素的邊距和內邊距設為 0，以消除不同瀏覽器之間的默認樣式差異，實現更一致的設計基礎，也可以用來設置全局的基礎樣式，例如設置全局的顏色、字體等。

* {
    margin: 0;
    padding: 0;
    color: black;
    font-family: Arial;
}

基本選擇器

• 元素選擇器

  p {
      color: green;
  }

• 屬性選擇器

  [type="text"] {
      color: green;
  }

• 類別選擇器

  .class {
      color: green;
  }

• ID 選擇器

  #header {
      color: green;
  }

分組選擇器

分組選擇器用於將相同樣式套用於多個元素

h1, h2, h3 {
    color: green;
}

組合選擇器

• 後代選擇器：h1 內的所有 span 皆會套用

  h1 span {
      color: green;
  }

• 子代選擇器：僅套用 h1 的下一層 span

  h1 > span {
      color: green;
  }

• 一般兄弟選擇器：接在 h1 後面的所有 span（同層）

  h1 ~ span {
      color: green;
  }

• 相鄰兄弟選擇器：緊接在 h1 後面的 span（同層）

  h1 + span {
      color: green;
  }

偽選擇器

• :hover：當用戶將鼠標懸停在元素上時的樣式

  a:hover {
      color: green;
  }

• :first-child：同層裡的第一個

  p:first-child {
      color: green;
  }

• :last-child：同層裡的最後一個

  p:last-child {
      color: green;
  }

• :nth-child( n )：同層裡的第 n 個

  p:nth-child(2) {
      color: green;
  }

• :nth-last-child(n)：同層裡的倒數第 n 個

  p:nth-last-child(2) {
      color: green;
  }

結語

CSS 選擇器是網頁設計的基礎，理解各個選擇器的使用可以更加準確的控制網頁的樣式。

參考資料

• CSS Selectors - MDN Web Docs
• 30個你必須記住的CSS選擇器
• [CSS] 選擇器表 (Selectors)