CSS 選擇器

CSS 選擇器是 CSS 規則的第一部分。它是一種元素和其他術語的模式，告訴瀏覽器哪些 HTML 元素應該被選中，以便規則內的 CSS 屬性值應用於它們。由選擇器選擇的元素或元素被稱為選擇器的主題。

在其他文章中，您可能已經遇到了一些不同的選擇器，並瞭解到有一些選擇器以不同的方式定位文件——例如，透過選擇 h1 之類的元素，或 .special 之類的類。

在 CSS 中，選擇器在 CSS 選擇器規範中定義；與 CSS 的任何其他部分一樣，它們需要在瀏覽器中得到支援才能正常工作。您將遇到的大多數選擇器都在 級別 3 選擇器規範 和 級別 4 選擇器規範 中定義，它們都是成熟的規範，因此您會發現這些選擇器具有極佳的瀏覽器支援。

如果您有多個使用相同 CSS 的元素，那麼可以將各個選擇器組合成選擇器列表，以便將規則應用於所有各個選擇器。例如，如果我的 h1 和 .special 類具有相同的 CSS，我可以將其寫成兩個獨立的規則。

h1 {
  color: blue;
}

.special {
  color: blue;
}

我也可以透過在它們之間新增逗號來將它們組合成選擇器列表。

h1, .special {
  color: blue;
}

逗號之前或之後允許使用空格。如果每個選擇器都在新的一行上，您也會發現選擇器更容易閱讀。

h1,
.special {
  color: blue;
}

在下面的即時示例中，嘗試組合具有相同宣告的兩個選擇器。組合它們之後，視覺顯示應該相同。

當您以這種方式組合選擇器時，如果任何選擇器在語法上無效，則整個規則將被忽略。

在下面的示例中，無效的類選擇器規則將被忽略，而 h1 仍然會應用樣式。

h1 {
  color: blue;
}

..special {
  color: blue;
}

但是，當它們組合在一起時，h1 和類都不會應用樣式，因為整個規則被認為是無效的。

h1, ..special {
  color: blue;
}

選擇器可以分為幾個不同的組別，瞭解你需要哪種型別的選擇器將有助於你找到合適的工具。在本篇文章的子文章中，我們將更詳細地介紹不同組別的選擇器。

型別選擇器針對的是 HTML 元素，例如 <h1>

h1 {
}

類選擇器針對的是具有特定 class 屬性值的元素。

.box {
}

ID 選擇器針對的是具有特定 id 屬性值的元素。

#unique {
}

這組選擇器提供了多種方法來根據元素上是否存在某個屬性來選擇元素。

a[title] {
}

或者甚至根據是否存在具有特定值的屬性來進行選擇。

a[href="https://example.com"]
{
}

這組選擇器包括偽類，它們對元素的某些狀態進行樣式化。例如，:hover 偽類僅在滑鼠指標懸停在元素上時才會選擇該元素。

a:hover {
}

它還包括偽元素，它們選擇元素的特定部分，而不是元素本身。例如，::first-line 始終選擇元素（以下情況下的 <p>）中的第一行文字，就像在第一行格式化文本週圍包裹了一個 <span>，然後對其進行選擇一樣。

p::first-line {
}

最後一組選擇器將其他選擇器組合起來，以便在我們的文件中定位元素。例如，以下程式碼使用子選擇器 (>) 選擇作為 <article> 元素的直接子元素的段落。

article > p {
}

在這篇文章中，我們介紹了 CSS 選擇器，它們可以讓你定位特定的 HTML 元素。接下來，我們將更詳細地介紹 型別選擇器、類選擇器和 ID 選擇器。

有關選擇器的完整列表，請參閱我們的 CSS 選擇器參考。

• 概述：CSS 構建塊
• 下一步