:empty 伪类选择器用于选中完全无内容的元素，包括无文本、子元素、空白字符等。例如 div:empty 可为无内容的 div 添加样式。只有当元素内真正为空时才匹配，含空格、换行、注释或子元素均不匹配。常用于隐藏空提示框 .tip:empty { display: none; } 或为 td:empty 设置占位符 ::before { content: "—"; }。关键在于确保元素内无任何字符或节点，否则无法生效。
:empty 是 CSS 中的一个伪类选择器，用于选中没有任何内容的元素。这里的“空”指的是元素内部没有文本内容、子元素、图片、表单控件等任何可见或不可见的内容（包括空白字符和换行）。
element:empty { 样式规则 }
例如，给所有空的 div 添加边框：
div:empty { border: 1px dashed #ccc; }
立即学习“前端免费学习笔记（深入）”；
只有当元素完全为空时，:empty 才会生效。以下情况被视为“非空”：
例如：
<div></div> ✅ 匹配 :empty
<div> </div> ❌ 不匹配（包含空格）
<div><p></p></div> ❌ 不匹配（有子元素）
常用于表单或列表中提示空状态：
比如隐藏空的提示容器：
.tip:empty { display: none; }
或者为没有内容的单元格设置占位样式：
td:empty::before { content: "—"; color: #999; }
基本上就这些。关键是理解“空”的定义——真正的一无所有。稍微有点内容，:empty 就不会生效。处理时建议确保元素内无空格或换行，否则可能无法命中预期样式。不复杂但容易忽略细节。
以上就是在css中如何使用:empty判断空元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
780
收藏
