[Html + CSS]使用:empty伪类，实现列表为空时的显示

在显示数据列表时，我们通常还会写不个判断，数据数据为空时，显示类似“无数据”的提示给用户
下面分享一个，不用去写js判断，直接css实现为空时的信息提示。
使用方法就是利用:empty伪类


:empty 伪类用来匹配空标签元素，例如：

<div class="cs-empty"></div>

.cs-empty:empty{
    width: 120px;
    padding: 20px;
    border: 10px dashed;
}

此时，div 元素就会匹配:empty伪类，呈现出虚线框 利用:before的特性，便能实现数据为空时的信息提示，代码如下：

.cs-search-module:empty::before{
    content: '没有搜索结果'；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

哈哈，发现有好一些用js操作的方法，都可以使用css来实现，大家在代码过程中，多思考一下，是否Css能代替js,从而提高性能，不过，也要注意Css的兼容性问题

参考：https://juejin.im/post/5e6b2b9ce51d4526fd069b87