empty解决数据为空的一个小场景！
前言
:empty和:blank这是我第一次见到这两个伪类选择器。之前并没有遇到过使用这两个伪类的场景，:blank和:empty翻译过来都是空白的意思。写道这里我想起来之前学英语，好像也会区别这两个单词的意思。在英文中：empty 主要指什么也没有，完全空的,blank主要是指指上面没有写字、印刷或做记号的空白表面，或指上面留着准备被填写的空白处。而在CSS中我感觉这两个伪类也差不多有类似的关系。
:empty
:empty的使用情况是比较苛刻的。只有当 当前元素没有子元素或者空格的情况下 或者是有且仅有注释的i情况下，:empty才会生效。
下面这个例子div1和div3分别纯空白和纯注释。div2和div4都有空格，最后只有div1和div4的: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的苛刻使用条件，我还是建议慎用并且正确使用。
作者：半夏的故事
链接：https://juejin.cn/post/7032667027240124423