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> 元素 |
