:empty伪类用于选中完全为空的元素，包括无子元素、文本、空格或注释，如会被匹配，而含内容的元素则不会。
在CSS中，:empty 是一个非常实用的伪类选择器，用于选中页面中没有任何内容的元素。这个“空”不仅指没有文本内容，还包括没有子元素、注释、空格或换行符。利用 :empty 可以有效隐藏或调整空容器的样式，避免页面出现不必要的空白或结构错乱。
什么是:empty伪类？
:empty 会匹配那些内部完全为空的元素。例如：
- 没有子节点
- 没有文本内容（包括空格）
- 没有HTML注释
以下元素会被 :empty 匹配：
<div></div> <p></p>
而这些则：
<div> </div> <!-- 包含空格 --> <p><span></span></p> <!-- 包含子元素 --> <div><!-- 注释 --></div>
使用:empty隐藏空容器
最常见的用途是隐藏空的DOM元素，防止它们占用布局空间。比如表单中的提示信息容器，可能在无错误时不显示：
.error-message:empty {
display: none;
}
这样，当JavaScript未填充错误信息时，该元素不会出现在页面流中，也不会影响排版。
也可以结合 height 和 visibility 控制视觉表现：
.placeholder:empty {
visibility: hidden;
min-height: 0;
}
配合其他选择器增强控制力
:empty 可与其他选择器组合使用，实现更精细的样式控制。
- 只对特定类的空元素应用样式：
.card:empty { background: transparent; border: none; } - 排除某些情况（如带data属性但内容为空）：
[data-required]:empty { border: 2px solid red; }用于标记必填但为空的区域
实际应用场景示例
假设有一个动态加载内容的侧边栏模块：
<aside class="sidebar"></aside>
当没有内容插入时，你不希望它显示边框或背景色：
.sidebar:empty {
display: none;
}
.sidebar {
width: 280px;
padding: 16px;
background: #f5f5f5;
border: 1px solid #ddd;
}
一旦JavaScript向 .sidebar 插入内容，:empty 条件不再满足，样式自动恢复。
基本上就这些。合理使用 :empty 能让页面更干净，减少冗余结构的影响，特别适合动态内容场景。注意空格和注释可能导致 :empty 失效，调试时需检查DOM实际内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
