CSS 组合运算符

CSS 提供了一组运算符，用于选择与特定元素有特殊位置关系的元素，例如选择子元素、直接子元素、相邻节点和直接相邻节点，接下来看一下每种运算符的作用。

选择子元素

子元素运算符用一个空格表示，空格前边指定要选择哪个元素的子元素，空格后面指定要选择的子元素，空格前后可以是任意类型的选择器，例如标签选择器、class 选择器、ID 选择器、属性选择器等。来看一个例子，代码如下：

<style>
  div span {
    color: red;
  }
</style>
<div>
  <p>这个是一个<span>段落</span></p>
  <span>一些文字</span>
  <div>
    <div>
      <span>测试文字</span>
    </div>
  </div>
</div>

预览：

div span 会选择 div 元素下的所有 span 元素，无论 span 嵌套了多少层，只要在 div 元素的下级，都会选中。

选择直接子元素

选择直接子元素使用大于号， >，它与选择子元素不同的是，只选择指定元素的、满足条件的第一级子元素，例如上边的例子使用 > 只会选择 <span>一些文字</span> 和 <span>测试文字</span>，因为只有它们两个在 <div> 的第一级，不过 <span>测试文字</span> 是在其它 <div> 元素中，我们这里使用了标签选择器，所以 > 前边选择的是所有的 div 元素，代码如下：

<style>
  div > span {
    color: red;
  }
</style>
<div>
  <p>这个是一个<span>段落</span></p>
  <span>一些文字</span>
  <div>
    <div>
      <span>测试文字</span>
    </div>
  </div>
</div>

预览：

选择相邻节点

选择相邻节点使用波浪号，esc 下面的按键，~，它会选择指定元素后面，所有同级的、满足条件的元素，示例代码如下：

<style>
  .paragraph ~ span {
    color: red;
  }
</style>
<div>
  <p class="paragraph">这个是一个<span>段落</span></p>
  <span>一些文字</span>
  <span>测试文字</span>
</div>

预览：

我们这里使用了 class 选择器选择了 p 元素，后面使用 ~ 选择它后面所有的 span 元素，把它们的文字颜色改成了红色。

选择直接相邻节点

直接相邻节点与相邻节点运算符的关系，和子元素与直接子元素运算符的关系类似，使用 + 运算符，它会选择指定元素后面、满足条件的、紧邻的元素，示例代码如下：

<style>
  .paragraph + span {
    color: red;
  }
</style>
<div>
  <p class="paragraph">这个是一个<span>段落</span></p>
  <span>一些文字</span>
  <span>测试文字</span>
</div>

预览：

可以看到只有 p 后面紧邻的 span 元素被选择了，再后面的 span 没有选择上。

多次使用组合运算符

组合运算符可以使用多次，那么就会按顺序选择满足条件的元素，直到最后一个选择器，如果有满足的条件的元素，就会进行选择，例如下方代码所示：

<style>
  div > div > span {
    color: red;
  }
</style>
<div>
  <p>这个是一个<span>段落</span></p>
  <span>一些文字</span>
  <div>
    <div>
      <span>测试文字</span>
    </div>
  </div>
</div>

预览：

这里选择了 div 元素的直接子元素 div，这里只有后面的 div 里还有嵌套的 div，满足这个关系，然后选择了它下面的、直接的 span 元素，这里只有 <span>测试文字</span> 这个元素满足这个关系，所以把它文字改成了红色。

各种组合运算符之间，也可以互相组合使用，代码如下：

<style>
  span + div > div span {
    color: red;
  }
</style>
<div>
  <p>这个是一个<span>段落</span></p>
  <span>一些文字</span>
  <div>
    <div>
      <span>测试文字</span>
    </div>
  </div>
</div>

预览：

这里先选择了 span 元素直接相邻的 div 元素，那么就选择了 <span>一些文字</span> 后面的 div，之后有选择它的直接子元素 div，再后面选择了它的所有 span 子元素，那么，只有 <span>测试文字</span> 是满足条件的，把它的文字改成了红色。

提示

示例中的选择结果都只有一个元素满足条件，实际情况可以选择多个满足条件的元素。

小结

CSS 组合运算符可以把具有位置关系的几组选择器关联起来，可以用来选择子元素、直接子元素、相邻节点和直接相邻节点，运算符前面的选择器是限定起始元素的，后面的选择器才是真正要选择的元素。