AI 中文社
欢迎来到 AI 中文社区（简称 AI 中文社），这里是学习交流 AI 人工智能技术的中文社区。 为了更好的体验，本站推荐使用 Chrome 浏览器。
CSS 组合器选择器
组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：
- 后代选择器 (空格)
- 子选择器 (>)
- 相邻兄弟选择器 (+)
- 通用兄弟选择器 (~)
1. 后代选择器
后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择 <div> 元素内的所有 <p> 元素：
div p {
background-color: yellow;
}
2. 子选择器
子选择器匹配属于指定元素子元素的所有元素。
下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：
div > p {
background-color: yellow;
}
3. 相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：
div + p {
background-color: yellow;
}
4. 通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：
div ~ p {
background-color: yellow;
}
5. 所有 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> 元素。 |
下一章：CSS 伪类选择器
1. 什么是伪类？伪类用于定义元素的特殊状态。例如，它可以用于：设置鼠标悬停在元素上时的样式；为已访问和未访问链接设置不同的样式；设置元素获得焦点时的样式。2. 伪类的语法：selector:pseudo-class { property: value; }