組合器

我們將要看到的最後一些選擇器稱為組合器，因為它們以一種有用的方式組合其他選擇器，使它們彼此之間以及文件中內容的位置建立關聯。

先決條件	已安裝基本軟體，瞭解檔案處理的基礎知識，HTML 基礎知識（學習 HTML 簡介），以及 CSS 工作原理的概念（學習 CSS 初步）。
目標	瞭解可在 CSS 中使用的不同組合器選擇器。

後代組合器

後代組合器 — 通常用單個空格 (“ ”) 字元表示 — 組合兩個選擇器，使得如果第二個選擇器匹配的元素具有匹配第一個選擇器的祖先（父級、父級的父級、父級的父級的父級等）元素，則選擇這些元素。使用後代組合器的選擇器稱為後代選擇器。

css

body article p

在下面的示例中，我們僅匹配位於類為 .box 的元素內部的 <p> 元素。

子元素組合器 (>) 放在兩個 CSS 選擇器之間。它僅匹配由第二個選擇器匹配的那些元素，這些元素是第一個選擇器匹配的元素的直接子元素。層次結構中更深層的後代元素不匹配。例如，要僅選擇為 <article> 元素的直接子元素的 <p> 元素

css

article > p

在下一個示例中，我們有一個有序列表 (<ol>) 巢狀在一個無序列表 (<ul>) 中。子元素組合器僅選擇那些為 <ul> 的直接子元素的 <li> 元素，併為其設定頂部邊框樣式。

如果刪除指定其為子元素組合器的 >，則最終會得到一個後代選擇器，並且所有 <li> 元素都將獲得紅色邊框。

緊鄰兄弟組合器 (+) 放在兩個 CSS 選擇器之間。它僅匹配由第二個選擇器匹配的那些元素，這些元素是第一個選擇器匹配的元素的緊鄰兄弟元素。例如，要選擇所有緊接在 <p> 元素之前的 <img> 元素

css

p + img

一個常見的用例是對標題後面的段落執行某些操作，如下面的示例所示。在該示例中，我們正在尋找任何與 <h1> 共享父元素並且緊接在該 <h1> 之後的段落。

如果在 <h1> 和 <p> 之間插入其他元素（例如 <h2>），你會發現段落不再與選擇器匹配，因此在元素相鄰時不會應用背景和前景色。

如果要選擇元素的兄弟元素，即使它們不直接相鄰，也可以使用後續兄弟組合器 (~)。要選擇所有出現在 <p> 元素之後的 <img> 元素，我們會這樣做

css

p ~ img

在下面的示例中，我們正在選擇所有出現在 <h1> 之後的 <p> 元素，即使文件中也有 <div>，出現在其之後的 <p> 也將被選中。

CSS 巢狀模組允許你編寫使用組合器建立複雜選擇器的巢狀規則。

css

p {
  ~ img {
  }
}
/* This is parsed by the browser as */
p ~ img {
}

& 巢狀選擇器也可以用於建立複雜選擇器。

css

p {
  & img {
  }
}
/* This is parsed by the browser as */
p img {
}

注意：在上面的示例中，不需要 & 巢狀選擇器，但新增它有助於明確顯示正在使用 CSS 巢狀。

您可以將之前課程中發現的任何選擇器與組合器結合使用，以選擇文件的一部分。例如，要選擇類名為“a”且是<ul>的直接子元素的列表項，請嘗試以下操作

css

ul > li[class="a"] {
}

但是，在建立選擇文件非常特定部分的大量選擇器列表時要小心。由於您使選擇器非常特定於標記中該元素的位置，因此很難重用 CSS 規則。

通常最好建立一個簡單的類並將其應用於目標元素。也就是說，如果您需要為文件中的某些內容設定樣式，但無法訪問 HTML（可能是由於它是由CMS生成的），那麼您對組合器的瞭解將非常有用。

您已到達本文的結尾，但您能記住最重要的資訊嗎？在繼續之前，您可以找到一些進一步的測試來驗證您是否保留了這些資訊——請參閱測試您的技能：選擇器。

這是我們關於選擇器的課程中的最後一節。接下來，我們將繼續學習 CSS 的另一個重要部分——層疊、特異性和繼承。