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 组合选择器