在css样式开发中，我们常常需要根据元素的内容状态来动态调整样式，比如当容器为空时隐藏该容器，或者给空元素添加默认的提示样式。这时候css提供的:empty伪类选择器就能派上用场，它可以精准匹配没有任何子元素的元素，让我们可以不用额外添加类名就能实现样式区分。
:empty伪类的基本定义
:empty是css3引入的伪类选择器，它的作用是选择那些没有任何子元素的元素。这里的子元素包括元素节点、文本节点，甚至连空白字符都会被算作内容，这一点是很多开发者容易忽略的点。
:empty的判断规则
要判断一个元素是否被:empty匹配，需要遵循以下规则：
- 元素内部不能有任何元素节点，比如就不属于空元素，因为内部有span子元素
- 元素内部不能有任何文本节点，包括空格、换行、制表符等空白字符
- 元素内部的HTML注释不会影响判断，比如会被判定为空元素
示例验证判断规则
我们可以通过下面的代码来验证上述规则：
<!-- 以下元素会被:empty匹配 --> <div></div> <div><!-- 只有注释 --></div> <!-- 以下元素不会被:empty匹配 --> <div> </div> <div> </div> <div>文本内容</div> <div><span></span></div>
:empty的实际使用场景
场景1：空容器隐藏
当页面中某些容器没有数据时，我们通常会隐藏这些容器避免空白占位，使用:empty可以很方便地实现：
/* 当data-container元素为空时隐藏 */
.data-container:empty {
display: none;
}
对应的html结构：
<div class="data-container">
<!-- 有数据时这里会渲染列表内容 -->
</div>
场景2：空元素显示默认提示
当输入框或者内容区域为空时，我们可以给空元素添加默认的提示文字，不用额外操作dom：
/* 空的内容区域显示默认提示 */
.content-area:empty::before {
content: "暂无内容";
color: #999;
font-size: 14px;
}
html结构如下：
<div class="content-area"></div>
场景3：表格空行样式处理
当表格没有数据时，我们可以给空的表格行添加特殊样式提示用户：
/* 表格中空的行添加浅灰背景 */
table tr:empty {
background-color: #f5f5f5;
}
使用:empty的注意事项
- 空格和换行会被判定为内容，所以如果要让元素被:empty匹配，必须保证元素内部完全没有任何字符，包括代码中的换行和缩进产生的空格
- :empty伪类不支持匹配有文本节点但文本被隐藏的元素，比如内部有
display:none的子元素，父元素也不会被判定为空 - 如果要兼容旧版本浏览器，需要确认目标浏览器是否支持:empty伪类，大部分现代浏览器都支持该特性，IE10及以下版本不支持
常见问题解答
问：元素内部有空格为什么不会被:empty匹配？
因为空格属于文本节点的一种，只要元素内部存在任何文本节点，不管是不是空白字符，都不会被:empty匹配。
问：:empty可以匹配input元素吗？
input是自闭合元素，它的值属于属性值而不是子节点内容，所以:empty无法判断input是否为空，要判断input为空需要使用:placeholder-shown或者其他属性选择器。