「这是我参与11月更文挑战的第二十天，活动详情查看：2021最后一次更文挑战」。

往期链接：

「CSS之选择器」

「CSS之选择器（二）」

「CSS之选择器（三）」

「CSS之选择器（四）」

「CSS之选择器（五）」

「CSS之选择器（六）::before和::after」

「CSS之选择器（七）:empty」

前言

在我们开发的时候，应该会遇到在一个父节点下相同节点实现相同的样式，比如一个 ul 标签下 n 个li标签。那今天我们来介绍两个应用比较广泛的选择器 + 和 ~ ，他也可以实现我们前面说到的效果。

+ 和 ~

他们两个都是作用于当前节点后面的同胞节点，不同的点是：

• +：针对紧随该节点后面的节点。

• ~是针对后面所有的节点，包括紧随该节点后面的节点。

通常代码格式如下所示：

input:checked + div {} 
input:checked ~ div {}

代码实现

下面我们就通过一个案例具体向大家展示一下，这个二者选择器的区别。

先来一张效果图。

这里简单说一下，

• 第一张图，是通过 + 控制的

• 第二张图，是通过 ~ 控制的

• 而第三张图，是通过 + 和 class 控制的

接下来请看代码：

<div class="specify-selector">
  <ul class="list">
    <li>我是资源</li>
    <li class="current">当前资源</li>
    <li>我是资源</li>
    <li>我是资源</li>
    <li>我是资源</li>
  </ul>
  <ul class="list">
    <li>我是资源</li>
    <li class="current-both">当前资源</li>
    <li>我是资源</li>
    <li>我是资源</li>
    <li>我是资源</li>
  </ul>
  <ul class="list">
    <li>我是资源</li>
    <li class="current-filter">当前资源</li>
    <li>我是资源</li>
    <li class="filter">我是资源</li>
    <li>我是资源</li>
  </ul>
</div>

.specify-selector {
  display: flex;
  .list {
    outline: 1px solid pink;
    width: 300px;
    line-height: 2;
    font-weight: bold;
    font-size: 20px;
    color: black;
    & + .list {
      margin-left: 30px;
    }
    li {
      padding: 0 15px;
    }
    .current {
      background-color: blue;
      color: #fff;
      & + li {
        background-color: yellow;
        color: #fff;
      }
    }
    .current-both {
      background-color: blue;
      color: #fff;
      & ~ li {
        background-color: yellow;
        color: #fff;
      }
    }
    .current-filter {
      background-color: blue;
      color: #fff;
      & ~ .filter {
        background-color: yellow;
        color: #fff;
      }
    }
  }
}

好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！