CSS 組合器
CSS 組合器
組合器是解釋選擇器之間關係的東西。
CSS 選擇器可以包含多個簡單選擇器。在簡單選擇器之間，我們可以包含一個組合器。
CSS 中有四種不同的組合器
- 後代選擇器 (空格)
- 子選擇器 (>)
- 相鄰兄弟選擇器 (+)
- 通用兄弟選擇器 (~)
後代選擇器
後代選擇器匹配指定元素的所有後代元素。
以下示例選擇 <div> 元素內的所有 <p> 元素：
子選擇器 (>)
子選擇器選擇指定元素的所有子元素。
以下示例選擇 <div> 元素的子元素的所有 <p> 元素
相鄰兄弟選擇器 (+)
相鄰兄弟選擇器用於選擇緊跟在另一個指定元素後面的元素。
兄弟元素必須具有相同的父元素，並且“相鄰”表示“緊隨其後”。
以下示例選擇緊跟在 <div> 元素後面的第一個 <p> 元素
通用兄弟選擇器 (~)
通用兄弟選擇器選擇指定元素的所有後續兄弟元素。
以下示例選擇 <div> 元素的所有後續兄弟 <p> 元素：
所有 CSS 組合器選擇器
| 選擇器 | 示例 | 示例描述 |
|---|---|---|
| 元素 元素 | div p | 選擇 <div> 元素內的所有 <p> 元素 |
| 元素>元素 | div > p | 選擇父元素是 <div> 元素的所有 <p> 元素 |
| 元素+元素 | div + p | 選擇緊跟在 <div> 元素後面的第一個 <p> 元素 |
| 元素1~元素2 | p ~ ul | 選擇所有前面有 <p> 元素的 <ul> 元素 |
