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

往期链接：

「CSS之选择器」

「CSS之选择器（二）」

「CSS之选择器（三）」

「CSS之选择器（四）」

「CSS之选择器（五）」

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

前言

回想一下，在我们如果要渲染一组数据的时候，往往需要通过v-for来循环遍历我们的数据源，拿到数据的每一项进行相应的操作。

我们还回判断数据源里面里面是否有数据，如果没有的话，我们可能会有一个图片加文字的形式提示数据内容为空。

然而，如上说的这些是要通过js或者vue 的指令来实现，我们今天就来说通过CSS来如果实现它。有请我们今天的CSS选择器 :empty.

:empty

• :empty作用于无子节点的节点，如下三种情况不会触发：empty

• 只存在节点：<div><p>我是数据</p></div>

• 只存在文本：<div>我是数据</div>

• 同时存在节点和文本：<div>我是 <p>数据</p></div>

实现

接下来，让我们实现一下如上图的效果。

<div>
  <ul class="emptyList">
    <li v-for="v in 20" :key="v">我是数据 {{v}}</li>
  </ul>
  <ul class="emptyList">
    <li v-for="v in 0" :key="v">我是数据 {{v}}</li>
  </ul>
</div>

$empty: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42d1cdf36f0b4f9eb86be1b93faa36a9~tplv-k3u1fbpfcp-zoom-1.image";
.emptyList {
  width: 400px;
  height: 350px;
  overflow: auto;
  outline: 1px solid pink;
  &:empty {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url($empty) no-repeat center/400px auto;
    &::after {
      margin-top: 190px;
      font-weight: bold;
      content: "nothing";
    }
  }
  & + .emptyList {
    margin-left: 20px;
  }
  li {
    padding: 0 10px;
    height: 40px;
    background-color: black;
    line-height: 40px;
    color: white;
    &:nth-child(even) {
      color:  black;
      background-color: white;
    }
  }
}

如上，就实现完成了。

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！