CSS 選擇器簡介

本課程深入探討使用級聯樣式表 (CSS) 來增強 HTML 視覺效果。 我們將從 CSS 選擇器開始—用於定位特定 HTML 元素的工具。

層疊樣式表 (CSS)

CSS 規定了 HTML 元件的外觀：顏色、間距、大小等等。雖然您可以使用內嵌 style 屬性（例如 <p style="color:red;"></p>）來設定各個元素的樣式，但這對於大型網站來說效率很低。

更有效的方法是在 HTML 的 <style></style> 部分中使用 元素，或使用 style.css:<link> 連結到 HTML 的單獨 CSS 檔案（如

）

  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style>

或

<!-- index.html -->
<link href="style.css" rel="stylesheet">

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

這會將相同的樣式套用至所有 <p></p> 元素。 瀏覽器開發人員工具（例如 Chrome 中的右鍵按一下「檢查」）可讓您檢查和修改套用的樣式以進行故障排除。

選擇 HTML 元素

p 中的 p { color: red; } 選取所有 <p></p> 元素。 對於更複雜的結構，id 和 class 屬性提供更精細的控制。

類別和 ID 選擇器

每個元素可以有一個唯一的id。 ID 選擇器 (#idName) 透過 id 定位元素。 但是，id 必須是唯一的，這限制了它們的靈活性。

課程提供了更多的多功能性。 多個元素可以共享同一個類別。類別選擇器（.className）以此類別為目標元素。 元素可以有多個類別（例如，<p class="red-text bold"></p>）。

.red-text { color: red; } 使用 red-text 類別設定所有元素的樣式。 p.red-text 僅使用 <p></p>.red-text 專門設定

元素的樣式

組合選擇器

文檔物件模型 (DOM) 將頁面的結構表示為樹。 組合選擇器利用這個層次結構。

• div p：選擇 <p></p> 元素（後代）中的所有 <div> 元素。 <li> <code>div > p：只選擇 <p></p> 元素的直接子 <div> 元素。 <li> <code>p span：選擇緊接在 <span></span> 後的 <p></p>。
• p ~ span：選擇 <span></span> 之後的所有 <p></p> 兄弟姊妹。


不鼓勵過於複雜的組合器組合。 您可以將它們與類別選擇器組合（例如，.intro p）。

偽選擇器

偽類選擇器根據元素的狀態來設計元素的樣式（例如，a:hover、a:active、a:visited）。 偽元素選擇器針對元素的部分（例如，::first-letter）。

其他選擇器

• *：通用選擇器，選取所有元素。
• 群組選擇器（例如，h1, h2, p）：選擇多個元素類型。
• 屬性選擇器（例如，p[lang]、p[lang="en"]）：根據屬性選擇元素。

進一步閱讀：

• 響應式設計
• 響應式圖片
• CSS 動畫

這篇文章最初出現在 TheDevSpace。