别再问我:empty有啥用了

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

平时开发中我们会遇到显示数据如果是空的情况下，则显示“暂无数据”之类的占位符，类似这种情况，有的ui框架是有做处理的，比如table会有个占位图片以及占位词，那么如果是我们自己开发的组件，以前我都是根据内容的有无来控制占位的显隐，如此一来，不仅需要多一个变量来维护，并且dom也增加了。

最近复习CSS伪类的时候，发现了 :empty 伪类，可以更好的帮助我们实现同样的效果。

:empty

来看看MDN对 :empty 的描述：

:empty CSS 伪类 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

那么 :empty 可以选中的元素是空标签，什么是空标签呢？

起始标签和闭合标签中不能有空格或者子标签，可以全包含注释标签。

兼容性

可以看到兼容性是还可以的，:empty是css2就有的概念了。

隐藏空元素

我们总要根据配置项来决定当前页面应该显示哪些面板，或者根据是否有内容来决定当前的模块是否应该被显示。

.list-container {
    background-color: aliceblue;
    border: 1px solid #000;
    padding: 10px;
    width: 300px;
}
.list-container + .list-container {
    margin-top: 10px;
}

<div class="list-container">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
</div>
<div class="list-container"></div>
<div class="list-container">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
</div>

这个时候如果内容缺失，但是我们有对样式做处理，从表现上来看就是一个可见的空容器，里面什么内容也没有，但是它又真真实实存在。
这样的结果想比UI是不会同意的，自己看着也难受，更何况是用户了，所以为了能准时下班，吃口热饭，烂摊子还得好好处理。

.list-container {
    background-color: aliceblue;
    border: 1px solid #000;
    padding: 10px;
    width: 300px;
}
.list-container + .list-container {
    margin-top: 10px;
}
++ .list-container:empty {
++     display: none;
++ }

<div class="list-container">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
</div>
<div class="list-container"></div>
<div class="list-container">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
</div>

空数据占位提示

类似的，开发中我们更多的情况是对空数据、空列表进行一个占位提示，我们才能知道当前模块到底是被“砍”了，还是空数据，这个时候就需要占位提示来告诉用户了。

.list-container {
    background-color: aliceblue;
    border: 1px solid #000;
    padding: 10px;
    width: 300px;
}
.list-container + .list-container {
    margin-top: 10px;
}
++ .list-container:empty {
++     display: flex;
++     justify-content: center;
++     align-items: center;
++ }
++ .list-container:empty::before {
++    content: "暂无数据";
++    font-size: 14px;
++    color: #c1c1c1;
++ }

注：这里加了一个伪元素 :before ，因为 :empty 能够做的是帮助我们选中空标签，如果我们想在空标签上添加些额外的东西，就需要依靠 :before 和 :after 这俩兄弟了。

总结

前端发展迅猛，为了面对日新月异的框架时不手足无措大喊学不动了，我们只有掌握原理， 我们才能屹立不倒。我们要不断巩固基础，做到知其所以然。