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

一般兄弟选择器

更多css3 教程