#书摘 #css #前端
《CSS 选择器世界》empty伪类应用场景
:empty伪类与::before/::after伪元素
::before 和::after 伪元素可以给标签插入内容、图形，但这样会不会影响:empty伪类的匹配呢？答案是：不会。这一特性非常实用。
无论是大项目还是小项目，都会用到:empty伪类。主要有下面几种场景。
1. 隐藏空元素
例如，某个模块里面的内容是动态的，其可能是列表，也可能是按钮，这些模块容器常包含影响布局效果的CSS属性，如margin、padding属性等。当然，这些模块里面有内容的时候，布局显示效果是非常好的。然而，一旦这些模块里面的内容为空，页面上就会有很大一块明显的空白，布局效果就不好，这种情况下使用:empty伪类予以控制就再好不过了：


.cs-module:empty {
display: none;
}​​


无须额外的JavaScript逻辑判断，直接使用CSS就可以实现动态样式效果。唯一需要注意的是，当列表内容缺失的时候，一定要把空格也去掉，否则 :empty 伪类不会匹配。

2. 字段缺失智能提示
例如，下面的HTML代码：

<dl>
<dt>姓名：</dt>
<dd>张三</dd>
<dt>性别：</dt>
<dd></dd>
<dt>手机：</dt>
<dd></dd>
<dt>邮箱：</dt>

<dd></dd>

</dl>​​


用户某些字段的信息是缺失的，此时开发人员应该使用其他占位符示意这里没有内容，例如用短横线(-)或者直接使用文字提示。但多年的开发经验表明，开发人员非常容易忘记这里需要的特殊处理，最终导致布局混乱，信息难辨。
但如今，我们不用再担心这样的问题了，直接使用CSS就可以处理这种情况，代码很简单：


dd:empty::before {
content: '暂无';
color: gray;
}​​


这样的布局效果良好，信息明确。存储的是什么数据内容，直接输出的就是什么内容，就算数据库中存储的是空字符也无须担心。
实际开发中，类似的场景还有很多。例如，表格中的备注信息通常都是空的，此时可以这样处理：

td:empty::before {
content: '-';
color: gray;
}​​


除此之外，还有一类典型场景需要用到:empty伪类，那就是Ajax动态加载数据为空的情况。当一个新用户开始使用一个产品的时候，很多模块内容是没有的。要是在过去，我们需要在JavaScript代码中做if判断，如果没有值，我们要输出“没有结果”或者“没有数据”的信息。但是现在有了:empty伪类，直接把这个工作交给CSS就可以了。例如：


.cs-search-module:empty::before {
content: '没有搜索结果';
display: block;
line-height: 300px;

text-align: center;
color: gray;
}​​


总之，这种方法非常好用，可以节约大量的开发时间，同时用户体验更好，维护更方便，因为可以使用一个通用类名使整站提示信息保持统一：


.cs-empty:empty::before {
content: '暂无数据';
display: block;
line-height: 300px;
text-align: center;
color: gray;

}​​



ps: 个人感觉有用，但不多，但有用
https://memo.cosine.ren/m/349