Skip to content

组合选择符

CSS 组合选择符描述了两个选择器之间的关系。

在 CSS 中包含四种组合方式:

  • 后代选择器,以空格 分割
  • 子元素选择器,以大于号 > 分割
  • 相邻兄弟选择器,以加号 + 分割
  • 普通兄弟选择器,以波浪号 ~ 分割

后代选择器

后代选择器用于选取某元素的后代元素。

如选择在 <div> 中的 <p>

css
div p {
    background-color: yellow;
}

子元素选择器

子元素选择器只能选择作为某元素直接或一级子元素的元素。

如选择 <div> 中的所有直接子元素 <p>

css
div>p {
    backgroud-color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器选择紧接在另一元素后的元素,且两者有共同父元素。

如选择所有位于 <div> 后的第一个 <p>

css
div+p {
    background-color: yellow;
'}

后续兄弟选择器

后续兄弟选择器选择所有指定元素后的相邻兄弟元素。

如选择所有 <div> 后的所有相邻兄弟元素 <p>

css
div~p {
    background-color: yellow;
}

Released under the MIT License.