开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第27天，点击查看活动详情

前言

在我们使用CSS给元素写样式的时候，如果想要给某个单独的元素节点设置样式可以用id或者单独写一个类名，这样子做略显繁琐，我们可以利用选择器的组合达到这样的效果，今天我们就来看一下CSS中的组合选择器。

后代选择器

后代选择器之间用空格的隔开，表示前者选择器下面所有满足后面选择器的元素，具体语法:选择器 子孙选择器。

    * {
        margin: 0 auto;
        padding: 0;
      }
      .box{
        width:200px;
        height:200px;
        border:1px solid skyblue;
      }
      .box .p {
        color:red
      }

    <div class="box">
      <div>
        <p class="p">御剑乘风来</p>
      </div>
      <p class='p'>除魔天地间</p>
      <p>有酒乐逍遥</p>
      <p>无酒我亦颠</p>
    </div>

从实例中我们可以发现只要是类名box下面有类名为p的元素都受到了影响，这也就是后代的含义。

子代选择器

子代选择器用'>'符号隔开，必须为父选择器下面的子选择器才会受影响，也就是说选择器必须是‘亲生’的才可以。

   .box > .p {
        color: red;
      }

相邻兄弟选择器

相邻选择器之间用‘+’号进行连接，两个选择器位置必须在一起才能生效，并且生效的是相邻的下面的元素，两者必须要在同一个父级下面。

    .p + p {
        color: red;
      }

      <p>御剑乘风来</p>
      <p class="p">除魔天地间</p>
      <p>有酒乐逍遥</p>
      <p>无酒我亦颠</p>

通过图片我们很清晰地看到第三个文字变为红色，符合我们上面讲解的条件。

后续兄弟选择器

兄弟选择器用‘~’号隔开，也是需要满足在同一个父级元素下，与相邻不同的是兄弟选择器是选择器后面所有的兄弟元素，而相邻只是后面的一个。

    .p ~ p {
        color: red;
      }

复合选择器

复合选择器之间紧紧挨着，没有间隔。只有同时满足所有选择器的元素才会受影响，比如有两个class类名的元素。

    .p.text {
        color: red;
      }

      <p class="p text">御剑乘风来</p>
      <p class="p">除魔天地间</p>
      <p class="text">有酒乐逍遥</p>
      <p>无酒我亦颠</p>

总结

以上就是CSS组合选择器的使用，后代与子代选择器区别在于是否‘亲生’；相邻与后续兄弟选择器区别在于是否‘相邻’；复合选择器之间没有‘隔阂’。