組合器
我們將要了解的最後一個選擇器稱為組合器。組合器用於以允許我們根據元素在 DOM 中的位置相對於其他元素（例如，子元素或同級元素）來選擇元素的方式組合其他選擇器。
| 預備知識 | HTML 基礎（學習基本 HTML 語法）、基本 CSS 選擇器。 |
|---|---|
| 學習成果 |
|
後代組合器
後代組合器 — 用單個空格 ( ) 字元表示 — 將兩個選擇器結合在一起，如果第二個選擇器匹配的元素具有匹配第一個選擇器的祖先（父元素、父元素的父元素，或父元素的父元素的父元素，依此類推）元素，則選中該元素。使用後代組合器的選擇器稱為後代選擇器。
body article p {
}
在下面的示例中，我們只匹配位於類名為 .box 的元素內部的 <p> 元素。
<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>
.box p {
color: red;
}
子組合器
子組合器 (>) 放置在兩個 CSS 選擇器之間。它僅匹配由第二個選擇器匹配的、作為由第一個選擇器匹配的元素的直接子元素的那些元素。層次結構中更深的後代元素不匹配。例如，要僅選擇 <article> 元素的直接子元素的 <p> 元素
article > p {
/* … */
}
在下一個示例中，我們有一個無序列表（<ul>）巢狀在一個有序列表（<ol>）中。子組合器僅選擇作為 <ul> 直接子元素的 <li> 元素，併為它們設定上邊框樣式。
<ul>
<li>Unordered item</li>
<li>
Unordered item
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ul>
ul > li {
border-top: 5px solid red;
}
在前一個示例中，嘗試刪除指定選擇器為子選擇器的 >。您最終會得到一個後代選擇器，所有 <li> 元素都會獲得紅色邊框。
相鄰兄弟組合器
相鄰同級組合器 (+) 放置在兩個 CSS 選擇器之間。它僅匹配由第二個選擇器匹配的、緊跟在由第一個選擇器匹配的元素之後的那些元素。例如，要選擇緊跟在 <p> 元素之後的所有 <img> 元素
p + img {
/* … */
}
一個常見的用例是處理緊跟在標題後面的段落，如下面的示例所示。在這裡，我們選擇任何與 <h1> 共享父元素並且緊跟在該 <h1> 之後的段落。
<article>
<h1>A heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</article>
body {
font-family: sans-serif;
}
h1 + p {
font-weight: bold;
background-color: #333333;
color: white;
padding: 0.5em;
}
在前一個示例中
- 嘗試在
<h1>和<p>之間插入另一個元素，例如<h2>。您會發現該段落不再被選擇器匹配，因此當元素相鄰時，不會應用背景和前景顏色。 - 現在修改
h1 + p選擇器，以便特殊樣式能再次應用於第一個段落。
後續兄弟組合器
如果您想選擇一個元素的同級元素，即使它們不直接相鄰，那麼您可以使用後續同級組合器 (~)。要選擇 <p> 元素之後任何位置的所有 <img> 元素，我們可以這樣做：
p ~ img {
/* … */
}
在下面的示例中，我們選擇 <h1> 之後的所有 <p> 元素，即使文件中還有一個 <div>，該 <div> 之後的 <p> 也會被選中。
<article>
<h1>A heading</h1>
<p>I am a paragraph.</p>
<div>I am a div</div>
<p>I am another paragraph.</p>
</article>
body {
font-family: sans-serif;
}
h1 ~ p {
font-weight: bold;
background-color: #333333;
color: white;
padding: 0.5em;
}
將組合器與選擇器結合使用
您可以將我們在之前課程中學到的任何選擇器與組合器結合使用，以選擇文件的一部分。例如，要選擇 <ul> 的直接子元素且類名為 a 的列表項，請嘗試以下方法：
ul > li[class="a"] {
}
但是，在建立選擇非常具體文件部分的大型選擇器列表時要小心。由於您使選擇器非常具體地指向元素在標記中的位置，因此將很難重用 CSS 規則。
通常最好建立一個簡單的類並將其應用於相關元素。話雖如此，如果您需要為文件中的某些內容設定樣式但又無法訪問 HTML（可能是因為它由 CMS 生成），那麼您對組合器的瞭解將非常有用。
總結
到此為止，關於選擇器的內容暫時告一段落。接下來，我們將提供一些測試，以檢查您對我們提供的關於 CSS 選擇器資訊的理解和掌握程度。