CSS之选择器(八):+ 和 ~

·  阅读 116
CSS之选择器(八):+ 和 ~

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

往期链接:

CSS之选择器

CSS之选择器(二)

CSS之选择器(三)

CSS之选择器(四)

CSS之选择器(五)

CSS之选择器(六)::before和::after

CSS之选择器(七):empty

前言

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

+ 和 ~

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

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

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

通常代码格式如下所示:

input:checked + div {} 
input:checked ~ div {}
复制代码

代码实现

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

先来一张效果图。

image.png

这里简单说一下,

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

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

  • 而第三张图,是通过 + 和 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!!!

分类:
前端
标签: