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

  尝试一下