CSS 組合器
CSS 組合器
組合器是解釋選擇器之間關系的某種機制。
CSS 選擇器可以包含多個簡單選擇器。在簡單選擇器之間，我們可以包含一個組合器。
CSS 中有四種不同的組合器：
- 后代選擇器 (空格)
- 子選擇器 (
>) - 相鄰兄弟選擇器 (
+) - 通用兄弟選擇器 (
~)
后代選擇器
后代選擇器匹配屬于指定元素后代的所有元素。
下面的例子選擇 <div> 元素內的所有 <p> 元素：
實例
div p {
background-color: yellow;
}
子選擇器
子選擇器匹配屬于指定元素子元素的所有元素。
下面的例子選擇屬于 <div> 元素子元素的所有 <p> 元素：
實例
div > p {
background-color: yellow;
}
相鄰兄弟選擇器
相鄰兄弟選擇器匹配所有作為指定元素的相鄰同級的元素。
兄弟（同級）元素必須具有相同的父元素，“相鄰”的意思是“緊隨其后”。
下面的例子選擇緊隨 <div> 元素之后的所有 <p> 元素：
實例
div + p {
background-color: yellow;
}
通用兄弟選擇器
通用兄弟選擇器匹配屬于指定元素的同級元素的所有元素。
下面的例子選擇屬于 <div> 元素的同級元素的所有 <p> 元素：
實例
div ~ p {
background-color: yellow;
}
所有 CSS 組合選擇器
| 選擇器 | 示例 | 示例描述 |
|---|---|---|
| element element | div p | 選擇 <div> 元素內的所有 <p> 元素。 |
| element>element | div > p | 選擇其父元素是 <div> 元素的所有 <p> 元素。 |
| element+element | div + p | 選擇所有緊隨 <div> 元素之后的 <p> 元素。 |
| element1~element2 | p ~ ul | 選擇前面有 <p> 元素的每個 <ul> 元素。 |
