CSS 組合選擇器 (Combinators)

組合選擇器用來描述選擇器之間的關係，讓你可以根據元素在 HTML 結構中的位置來選取元素。

後代選擇器 (Descendant Selector)

用空格分隔兩個選擇器，會選取第一個選擇器「內部」所有符合第二個選擇器的元素，不管隔了幾層。

div p {
  color: blue;
}

<div>
  <p>這個 p 會被選取</p>
  <section>
    <p>這個 p 也會被選取（隔了一層）</p>
  </section>
</div>
<p>這個 p 不會被選取（不在 div 裡面）</p>

子元素選擇器 (Child Selector)

用 > 連接兩個選擇器，只會選取第一個選擇器的「直接子元素」中符合第二個選擇器的元素。

div > p {
  color: blue;
}

<div>
  <p>這個 p 會被選取（直接子元素）</p>
  <section>
    <p>這個 p 不會被選取（不是直接子元素）</p>
  </section>
</div>

相鄰兄弟選擇器 (Adjacent Sibling Selector)

用 + 連接兩個選擇器，會選取「緊接在」第一個選擇器後面的兄弟元素。

h1 + p {
  font-size: 20px;
}

<h1>標題</h1>
<p>這個 p 會被選取（緊接在 h1 後面）</p>
<p>這個 p 不會被選取</p>

一般兄弟選擇器 (General Sibling Selector)

用 ~ 連接兩個選擇器，會選取第一個選擇器「後面」所有符合第二個選擇器的兄弟元素。

h1 ~ p {
  color: gray;
}

<p>這個 p 不會被選取（在 h1 前面）</p>
<h1>標題</h1>
<p>這個 p 會被選取</p>
<div>一個 div</div>
<p>這個 p 也會被選取</p>

組合選擇器總覽

實際應用範例

選單樣式

/* 只有 nav 裡面的連結才套用這個樣式 */
nav a {
  text-decoration: none;
  color: white;
}

清除第一個段落的上邊距

/* 緊接在標題後面的段落不需要上邊距 */
h2 + p {
  margin-top: 0;
}

巢狀列表樣式

/* 只對第一層的 li 設定樣式 */
ul > li {
  font-weight: bold;
}

/* 巢狀的 li 不要粗體 */
ul ul > li {
  font-weight: normal;
}