标签搜索
隐藏侧边栏

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

搞前端的半夏
2022-05-11 / 0 评论 / 0 点赞 / 31 阅读 / 1,138 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-11,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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>

image-20211120220203923

image-20211120220004529

: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的苛刻使用条件,我还是建议慎用并且正确使用。

0

评论区