了解 CSS 選擇器的所有重要事項

選擇器允許我們將一個或多個聲明與頁面上的一個或多個元素關聯起來。

基本選擇器

假設在頁面上有一個 p 元素，我們想要使用黃色顯示其中的文字。

我們可以使用選擇器 p 來定位該元素，該選擇器定位頁面上所有使用 p 標籤的元素。實現我們想要的效果的一個簡單 CSS 規則如下：

p {
 color: yellow;
}

每個 HTML 標籤都有對應的選擇器，例如：div、span、img。

如果一個選擇器匹配多個元素，則頁面上的所有元素都將受到更改的影響。

HTML 元素有兩個在 CSS 中非常常用的屬性，用於將樣式與頁面上的特定元素關聯起來：class 和 id。

這兩者之間有一個重大的區別：在 HTML 文檔中，您可以在多個元素中重複使用相同的 class 值，但是您只能使用一次 id。根據以下的推論，使用 class 時，您可以選擇具有 2 個或多個特定類名的元素，而使用 id 則無法實現這一點。

使用 . 符號來標識類，使用 # 符號來標識 id。

使用 class 的示例：

<p class="dog-name">
 Roger
</p>

.dog-name {
 color: yellow;
}

使用 id 的示例：

<p id="dog-name">
 Roger
</p>

#dog-name {
 color: yellow;
}

結合選擇器

到目前為止，我們已經看到了如何定位元素、類或 ID。現在讓我們介紹更強大的選擇器。

定位帶有類或 ID 的元素

您可以定位具有特定類或 id 的特定元素。

使用 class 的示例：

<p class="dog-name">
 Roger
</p>

p.dog-name {
 color: yellow;
}

使用 id 的示例：

<p id="dog-name">
 Roger
</p>

p#dog-name {
 color: yellow;
}

如果已經使用 class 或 id 提供了定位元素的方法，為什麼還需要這樣做呢？您可能需要這樣做是為了有更高的特意性(specificity)。我們稍後會看到這是什麼意思。

定位多個類

您可以使用 .class-name 定位具有特定 class 的元素，就像您之前看到的一樣。您可以使用點號將類名連接起來，而無需使用空格來定位具有 2 個（或多個）類的元素。

示例：

<p class="dog-name roger">
 Roger
</p>

.dog-name.roger {
 color: yellow;
}

結合類和 id

同樣地，您可以結合類和 id。

示例：

<p class="dog-name" id="roger">
 Roger
</p>

.dog-name#roger {
 color: yellow;
}

分組選擇器

您可以結合選擇器將相同的聲明應用於多個選擇器。為此，您可以使用逗號將它們分開。

示例：

<p>
 My dog name is:
</p>
<span class="dog-name">
 Roger
</span>

p, .dog-name {
 color: yellow;
}

您可以在這些聲明中添加空格，使它們更清晰：

p,
.dog-name {
 color: yellow;
}

跟隨文檔樹狀結構使用選擇器

我們已經看到了如何使用標籤名稱、類或 id 定位頁面上的元素。

您可以通過結合多個項目來創建更具體的選擇器，以跟隨文檔樹狀結構。例如，如果您在 p 標籤內部嵌套了一個 span 標籤，您可以定位該元素，而不將樣式應用於不包含在 p 標籤中的 span 標籤上：

<span>
 Hello!
</span>
<p>
 My dog name is:
 <span class="dog-name">
 Roger
 </span>
</p>

p span {
 color: yellow;
}

請注意，我們在兩個令牌 p 和 span 之間使用了一個空格。

即使右邊的元素多級嵌套，這也適用。

要使依賴關係嚴格限於第一級，您可以在兩個令牌之間使用 > 符號：

p > span {
 color: yellow;
}

在這種情況下，如果一個 span 不是 p 元素的第一個子元素，它將不會應用新的顏色。

直接子元素將應用樣式：

<p>
 <span>
 This is yellow
 </span>
 <strong>
 <span>
 This is not yellow
 </span>
 </strong>
</p>

相鄰兄弟選擇器使我們僅對在特定元素之前的元素應用樣式。使用 + 運算符實現：

示例：

p + span {
 color: yellow;
}

這將使所有在 p 元素之前的 span 元素變成黃色：

<p>This is a paragraph</p>
<span>This is a yellow span</span>

我們還有更多可以使用的選擇器：

  • 屬性選擇器
  • 虛擬類選擇器
  • 虛擬元素選擇器

更多內容將在未來的文章中介紹。