套用一下MDN上的原话：
:empty是（CSS伪类）代表没有子元素的元素，子元素只可以是元素节点或文本（包括空格）。注释或者处理指令都不会对其产生影响。
认识认识
下面看个例子
div{
width: 500px;
height: 200px;
background: purple;
}
div:empty{
background: palegreen;
}
<div></div>
<div> </div>
<div>卡卡西</div>OUTPUT:
伪元素和:empty
在和伪元素结合时，我们来看看:empty伪类表现如何？
p::before {
content: '卡卡1';
}
p:empty::before {
content: '卡卡2';
}
p {
color: silver;
}
p:empty {
color: red;
}
<p></p>
<p> </p>OUTPUT：
此现象说明，空元素内容使用了伪元素生成内容，是不被:empty伪类认可的，选择器依然认为它是个空元素.
实战应用
1、用:empty在表单中显示错误信息
在错误消息前添加一个❌图标，没有错误消息时，则不出现。
.error:before {
color: red;
content: '\0274c '; /* ❌ icon */
}<!-- No error message -->
<div class="error"></div>
<!-- Yes error message -->
<div class="error">Missing Email</div>OUTPUT:
Without Empty
With :empty
同样的道理，我们也可以用到alerts来展示弹框信息。这样就不用额外的添加class去处理，直接设置error类的样式，甚至都不需要display:none;
此外有个好的消息是在Selector Level 4，空格将会被认为是empty! 这将会导致行为和:moz-only-whitespace类似，换句话说就是下面的情况将被认为是empty.
<!-- Considered Empty in CSS Selectors Level 4 -->
<p> </p>
:blank css伪类选择器用于匹配如下节点（目前了解即可）
1、没有子节点
2、仅有空的文本节点
3、仅有空白符的文本节点
浏览器兼容性
最后一个大招，在做移动端的时候我们经常会处理一下skeleton的情况，需要写很多dom处理，利用:empty并结合backgroun的相关属性我们可以只写一个div就可以搞定。
代码参考如下：
<div class="demo"></div>.demo:empty {
margin: auto;
width: 500px;
height: 600px; /* change height to see repeat-y behavior */
background-image:
radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 );
background-repeat: repeat-y;
background-size:
100px 200px, /* circle */
50px 200px, /* highlight */
150px 200px,
350px 200px,
300px 200px,
250px 200px;
background-position:
0 0, /* circle */
0 0, /* highlight */
120px 0,
120px 40px,
120px 80px,
120px 120px;
animation: shine 1s infinite;
}
@keyframes shine {
to {
background-position:
0 0,
100% 0, /* move highlight to right */
120px 0,
120px 40px,
120px 80px,
120px 120px;
}
}具体展示效果请扫码观看
参考资料
1、www.samanthaming.com/tidbits/72-…
2、www.zhangxinxu.com/wordpress/2…
3、developer.mozilla.org/zh-CN/docs/…
4、developer.mozilla.org/zh-CN/docs/…
5、www.freecodecamp.org/news/empty-…
