CSS Combinators 包括：
- 後代選擇器（Descendant Combinator）： 「 」
- 子選擇器（Child Combinator）：「 > 」
- 相鄰兄弟選擇器（Adjacent Sibling Combinator）：「 + 」
- 一般兄弟選擇器（General Sibling Combinator）：「 – 」
- 組合選擇器（Group Selector）：「 , 」
1. 後代選擇器（Descendant Combinator）：（空格）
- 用法：
A B - 作用：選擇所有位於
A元素內部的B元素，不論它們之間有多少層嵌套。 - 例子：
<div class="container">
<p>我是第一個段落</p>
<div>
<p>我是嵌套的段落</p>
</div>
</div>.container p {
color: red;
}
結果：選擇 .container 內的所有 p 元素，無論它們是否直接位於 .container 內。例子中，兩個 p 元素都會變成紅色。
2. 子選擇器（Child Combinator）：>
語法：A > B
- 作用：選擇
A的直接子元素B，不會選擇後代元素（孫元素及更深層次的後代元素）。 - 例子
<div class="container">
<p>我是直接子元素</p>
<div>
<p>我是嵌套的段落</p>
</div>
</div>.container > p {
color: blue;
}
結果：只會選擇 .container 的直接子元素 p，即第一個 p 會變成藍色。嵌套在 div 中的第二個 p 不會被選中。
3. 相鄰兄弟選擇器（Adjacent Sibling Combinator）：+
語法：A + B
- 作用：選擇緊接在
A元素後面的相鄰兄弟元素B，中間不能有其他元素。 - 例子
<h1>標題</h1>
<p>我是第一個段落</p>
<p>我是第二個段落</p>h1 + p {
color: green;
}
結果：只會選擇緊接在 h1 後面的第一個 p，即第一個 p 會變成綠色。第二個 p 不會被影響，因為它不是緊鄰的兄弟元素。
4. 一般兄弟選擇器（General Sibling Combinator）：~
語法：A ~ B
- 作用：選擇
A元素後面的所有兄弟元素B，不要求它們緊鄰在一起。 - 例子
<h1>標題</h1>
<p>我是第一個段落</p>
<p>我是第二個段落</p>
<div>我是另一個元素</div>
<p>我是第三個段落</p>h1 ~ p {
color: orange;
}
結果：所有位於 h1 後面的 p 元素都會變成橙色，包括第一個、第二個和第三個 p，即使它們中間隔著其他元素（如 <div> ）。
組合選擇器（Group Selector）：,（逗號）
語法：A, B, C
- 作用：將多個選擇器組合在一起，使它們共享相同的樣式。
- 例子：
<h1>我是標題</h1>
<h2>我是副標題</h2>
<p>我是段落</p>h1, h2, p {
color: purple;
}
結果：h1、h2 和 p 都會變成紫色，因為這三個選擇器共享相同的樣式。
6. 否定偽類選擇器（:not）（雖然不是組合器，但它常用於選擇元素時排除特定元素）
語法：:not(A)
- 作用：選擇除了
A之外的所有元素。 - 例子：
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li class="special">特殊項目</li>
<li>項目 3</li>
</ul>li:not(.special) {
color: gray;
}
結果：除了類為 special 的 li 元素外，所有的 li 元素都會變成灰色。
7. 伺機選擇器（Universal Selector）：*
語法：*
- 作用：選擇所有元素。
- 例子：
<div>
<p>段落 1</p>
<p>段落 2</p>
</div>* {
margin: 0;
padding: 0;
color: red;
}
結果：所有的元素（包括 div、p 等）都會把內邊距和外邊距設置為 0，並且文字顏色為紅色。
小結：所有 CSS 組合器及部分常用選擇器
- （空格）：後代選擇器，選擇
A內部的所有B元素。 >：子選擇器，選擇A的直接子元素B。+：相鄰兄弟選擇器，選擇緊接在A後面的兄弟元素B。~：一般兄弟選擇器，選擇A之後的所有兄弟元素B。,：組合選擇器，將多個選擇器組合在一起，使它們共享相同的樣式。:not：否定偽類選擇器，用來排除特定元素。*：伺機選擇器，選擇所有元素。