使用 :empty 选择器可以精准匹配不包含任何子节点（包括文本、注释或元素）的标签，通过设置 display: none 即可将其隐藏。该选择器要求目标元素内部完全空白，若存在空格、换行符或不可见字符，则无法生效。
:empty 对包含空格的标签是否有效
当标签内仅包含空格或换行符时，:empty 选择器不会匹配该元素，因为浏览器会将这些空白字符视为文本节点。必须确保标签内部没有任何字符才能触发隐藏效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Empty Selector Test</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
/* 仅当内部完全无内容时隐藏 */
.box:empty {
display: none;
}
</style>
</head>
<body>
<!-- 完全空白，会被隐藏 -->
<div class="box"></div>
<!-- 包含空格，不会被隐藏 -->
<div class="box"> </div>
<!-- 包含换行，不会被隐藏 -->
<div class="box"
></div>
</body>
</html>如何清理 HTML 结构中的多余空白节点
在实际开发中，HTML 格式化产生的缩进和换行常导致 :empty 失效。可以通过移除模板引擎中的空白节点，或使用 CSS 预处理器在编译阶段清理代码，从而确保选择器正常工作。
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clean Empty Nodes</title>
<style>
.spacer {
display: block;
height: 20px;
background: red;
}
.spacer:empty {
display: none;
}
</style>
</head>
<body>
<!-- 推荐写法：直接不留空格 -->
<div class="spacer"></div>
<!-- 错误写法：包含不可见字符 -->
<div class="spacer"> </div>
</body>
</html>包含注释的标签是否被视为非空
如果标签内部包含 HTML 注释，即使没有可见文本，:empty 选择器也不会匹配该元素。这是因为注释在 DOM 树中被视为一个节点，破坏了“空”的定义。
