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; }