CSS 组合选择器 - 菜鸟教程

CSS组合器

组合器可以解释选择器之间的关系。

CSS选择器可以包含多个简单选择器。在简单的选择器之间，我们可以包括组合器。

CSS中有四种不同的组合器：

后代选择器匹配作为指定元素后代的所有元素。以下示例选择<div>元素内的所有<p>元素：

div p {
          background-color: yellow;
        }

尝试一下

子选择器选择作为指定元素的直接子元素的所有元素。以下示例选择所有<p>元素，它们是<div>元素的直接子元素：

div > p {
    background-color: yellow;
  }

尝试一下

相邻的兄弟选择器选择与指定元素的相邻兄弟节点相关的所有元素。同级元素必须具有相同的父元素，“邻近”表示“紧跟其后”。以下示例选择紧跟在<div>元素之后的所有<p>元素：

div + p {
          background-color: yellow;
        }

尝试一下

通用兄弟选择器选择所有元素，这些元素是指定元素的兄弟元素。以下示例选择所有<p>元素作为<div>元素的兄弟元素：

div ~ p {
          background-color: yellow;
        }

尝试一下