5.1 選擇器種類
CSS中的組合選擇器允許根據元素在DOM樹中的相互位置來選擇元素。它們提供了更精確的樣式控制，允許根據上下文來樣式化元素。在CSS中有幾種類型的組合選擇器：後代、子元素、相鄰兄弟元素和一般兄弟元素。
組合選擇器種類：
- 後代選擇器 (Descendant Selector)
- 子元素選擇器 (Child Selector)
- 相鄰兄弟元素選擇器 (Adjacent Sibling Selector)
- 一般兄弟選擇器 (General Sibling Selector)
5.2 後代選擇器
後代選擇器選擇所有是指定元素後代的元素。後代是指位於指定元素內的所有元素無論嵌套層次（這不僅僅是孩子，還包括孫子和曾孫等）。
語法：
父元素 後代 {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有位於 <div> 內的 <p> */
div p {
color: blue;
}
HTML
<div>
<p>這個段落會是藍色的。</p>
<div>
<p>這個段落也會是藍色的，因為它是 "div" 的後代。</p>
</div>
</div>
<p>這個段落不會是藍色的。</p>
5.3 子元素選擇器
子元素選擇器只選擇那些是指定父元素的直接子元素的元素。
語法：
父 > 子 {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 只選擇那些作為 .container 直接子元素的 <p> */
.container > p {
color: green;
}
HTML
<div class="container">
<p>這個段落會是綠色的。</p>
<div class="wrapper">
<p>這個段落不會是綠色的，因為它不是 .container 的直接子元素。</p>
</div>
<p>這個段落會是綠色的。</p>
</div>
<p>這個段落不會是綠色的。</p>
5.4 相鄰兄弟元素選擇器
相鄰兄弟元素選擇器選擇緊接著指定元素之後位於同一層級的元素。
語法：
前置 + 後置 {
屬性: 值;
屬性: 值;
}
CSS
/* 選擇直接跟在 <h1> 之後的 <p> */
h1 + p {
color: red;
}
HTML
<h1>標題 1</h1>
<p>這個段落會是紅色的，因為它緊跟在 "h1" 之後。</p>
<p>這個段落不會是紅色的。</p>
5.5 一般兄弟選擇器
一般兄弟選擇器選擇所有跟在指定元素之後且位於同一層級的元素。
語法：
前置 ~ 後置 {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有在 <h1> 之後且位於同一層級的 <p> */
h1 ~ p {
color: purple;
}
HTML
<h1>標題 1</h1>
<p>這個段落會是紫色的。</p>
<p>這個段落也會是紫色的。</p>
<div>
<p>這個段落不會是紫色的，因為它位於不同的層級。</p>
</div>
GO TO FULL VERSION