:empty是css中用于选择无任何子节点（包括文本、空格、换行）元素的伪类。示例中仅第一个div被选中，后续因含空格或子标签不匹配。使用时需确保元素完全为空，常用于隐藏空容器或提示空输入框，结合.trim()和结构检查可提升准确性。

在CSS中选择空元素，可以使用 :empty 伪类选择器。这个选择器能匹配那些内部没有任何内容的元素，包括文本、子元素或空白符（如空格、换行）都不会存在。

什么是:empty？

:empty 用于选择没有子节点的元素。这里的“子节点”包括：

• 文本内容（即使是空格也算）
• html标签
• 注释节点

只要元素内有任何内容，:empty 就不会匹配它。

示例：

立即学习“前端免费学习笔记（深入）”；

 <div class="box"></div>           <!-- 匹配 :empty --> <div class="box"> </div>         <!-- 不匹配（包含空格） --> <div class="box"><p></p></div>   <!-- 不匹配（有子元素） -->

如何正确使用:empty

确保目标元素真正“空”，避免意外的空白。常见技巧：

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

8

查看详情

• 写HTML时紧贴标签，不要留空格或换行
• 用javaScript动态判断是否为空时，注意trim文本内容
• 结合其他选择器提高精确度，例如：.message:empty

实用场景举例

隐藏无内容的容器：

 .message:empty {   display: none; } 

给空输入框加提示样式：

 .input-placeholder:empty::before {   content: "请输入内容";   color: #999; } 

注意：如果元素中有不可见字符或换行，:empty将失效。建议在开发时检查dom结构是否干净。

基本上就这些，掌握:empty的关键是理解“空”的定义——完全无内容才算是空。

以上就是在