搜索
阅读量：
收藏数：
点赞数：CSS 组合器
CSS 组合器
组合器是解释选择器之间关系的东西。
一个 CSS 选择器可以包含多个简单的选择器。在简单之间 选择器，我们可以包含一个组合器。
CSS 中有四种不同的组合器：
- 后代选择器（空格）
- 子选择器 （>）
- 相邻的同级选择器 （+）
- 通用同级选择器 （~）
后代选择器
后代选择器匹配作为指定后代的所有元素 元素。
以下示例选择 <div> 元素内的所有 <p> 元素：
1 | div p { background-color: yellow;} |
子选择器 （>）
子选择器选择作为 指定的元素。
以下示例选择所有 <p> 元素 <div>的子女 元素：
1 | div > p { background-color: yellow;} |
相邻同级选择器 （+）
相邻的同级选择器用于选择直接 在另一个特定元素之后。
同级元素必须具有相同的父元素，“相邻”表示 “紧随其后”。
下面的示例选择紧跟在 <div>元素之后的第一个 <p> 元素：
1 | div + p { background-color: yellow;} |
通用同级选择器 （~）
常规同级选择器选择指定元素的下一个同级元素的所有元素。
以下示例选择所有 <p> 元素，这些元素是 <div> 元素的下一个同级元素：
1 | div ~ p { background-color: yellow;} |
所有 CSS Combinator 选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| element element | div p | 选择元素内的所有<p> <div> 元素 |
| element>element | div > p | 选择父元素为元素的所有<p> <div> 元素 |
| element+element | div + p | 选择<p>紧跟在元素之后的第一个<div>元素 |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |
0评论