我使用CSS-empty解决数据为空的一个小场景!

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

:empty和:blank这是我第一次见到这两个伪类选择器。之前并没有遇到过使用这两个伪类的场景，:blank和:empty翻译过来都是空白的意思。写道这里我想起来之前学英语，好像也会区别这两个单词的意思。在英文中：empty 主要指什么也没有，完全空的,blank主要是指指上面没有写字、印刷或做记号的空白表面，或指上面留着准备被填写的空白处。而在CSS中我感觉这两个伪类也差不多有类似的关系。

:empty

:empty的使用情况是比较苛刻的。只有当 当前元素没有子元素或者空格的情况下 或者是有且仅有注释的i情况下，:empty才会生效。

下面这个例子div1和div3分别纯空白和纯注释。div2和div4都有空格，最后只有div1和div3的:empty生效

<div class="div1"></div>
<div class="div2"> </div>
<div class="div3"><!-- 注释 --></div>
<div class="div4"> <!-- 注释 --> </div>

:blank

:blank我查过之前的历史，之前它算是:empty的升级版，可以允许空格的存在。

不过现在它用来设置输入为空的输入框。不过也是在讨论中，所以我觉得这个万一需要了解！

再谈谈:empty

我是为啥突然用到了这个伪类？作为一个面向vue开发者，少不了用到v-for。最近在开发过程中，我遇到这样一个场景：

从后端接受一个数组元素，并通过遍历数组，展示在页面上。如果数组没有数据，父元素需要设置变成红色的边框。

一开始我是通过数组的长度加上动态的style去做的。作为一个CSS的爱好者，那肯定是：能用css解决的，就用css解决。于是我就找到了这个伪类。

<div class="container">
<div v-for="i in ary" :key="i">{{i}}</div>
</div>

.container:empty{
  width:100px;
  height: 100px;
  border: 100px;
}

不过因为:empty的苛刻使用条件，我还是建议慎用并且正确使用。