:empty伪类选择完全无内容的元素（不含文本、子元素或空格），可用于设置占位背景或提示文字。例如为空容器添加斜纹背景或通过::before显示“暂无内容”；适用于表单上传、评论区、数据表格等场景，提升空状态用户体验。使用时需确保元素纯净，避免空格导致匹配失败。
在CSS中，:empty 伪类用于选择那些**内部没有任何内容的元素**，包括文本、子元素、空格或换行符。利用这个特性，可以为“空”的容器设置占位背景、提示文字或其他视觉样式，提升用户体验。
:empty 只会选中完全为空的元素。只要元素内包含以下任何一项，就不会被匹配：
当某个内容区域暂时没有数据时，可以通过 :empty 给它添加一个浅色背景或图案，提示用户该区域为空。
示例代码：
.empty-area {
width: 200px;
height: 100px;
border: 1px dashed #ccc;
background-color: #f9f9f9;
}
.empty-area:empty {
background-image: linear-gradient(45deg, #eee 25%, transparent 25%),
linear-gradient(-45deg, #eee 25%, transparent 25%);
background-size: 10px 10px;
background-position: 0 0;
}
这样，只有当元素为空时才会显示斜纹背景，填充内容后自动恢复默认样式。
立即学习“前端免费学习笔记（深入）”；
通过 :empty::before 或 :empty::after 添加视觉提示，比如“暂无内容”等说明文字。
.empty-tip:empty::before {
content: "暂无内容";
display: block;
color: #999;
font-size: 14px;
text-align: center;
padding-top: 30px;
}
这个方法常用于列表项、卡片组件或动态加载区域，让用户清楚知道“不是页面出错，而是当前确实没有数据”。
注意避免误触发：确保模板输出时不意外插入空格或换行，否则 :empty 将失效。可配合JavaScript清理或服务端渲染时控制结构。
基本上就这些。合理使用 :empty 能让界面更友好，尤其在动态内容场景下，既简洁又实用。
以上就是如何在CSS中使用伪类:empty选择空元素_结合:empty设置占位背景或提示的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
915
收藏
