:empty是CSS中用于选择无任何子节点（包括文本、空格、换行）元素的伪类。示例中仅第一个div被选中，后续因含空格或子标签不匹配。使用时需确保元素完全为空，常用于隐藏空容器或提示空输入框，结合.trim()和结构检查可提升准确性。
在CSS中选择空元素，可以使用 :empty 伪类选择器。这个选择器能匹配那些内部没有任何内容的元素，包括文本、子元素或空白符（如空格、换行）都不会存在。
什么是:empty？
:empty 用于选择没有子节点的元素。这里的“子节点”包括：
- 文本内容（即使是空格也算）
- HTML标签
- 注释节点
只要元素内有任何内容，:empty 就不会匹配它。
示例：
如何正确使用:empty
确保目标元素真正“空”，避免意外的空白
。常见技巧：
- 写HTML时紧贴标签，不要留空格或换行
- 用JavaScript动态判断是否为空时，注意trim文本内容
- 结合其他选择器提高精确度，例如：
.message:empty
实用场景举例
隐藏无内容的容器：
.message:empty {
display: none;
}
给空输入框加提示样式：
.input-placeholder:empty::before {
content: "请输入内容";
color: #999;
}
注意：如果元素中有不可见字符或换行，:empty将失效。建议在开发时检查DOM结构是否干净。
基本上就这些，掌握:empty的关键是理解“空”的定义——完全无内容才算是空。
