17370845950

:empty选择器用于匹配不含任何子节点的元素，包括文本、空格、标签或注释。例如，仅会被.box:empty选中，其余含空格、子标签或文字的均不匹配。需注意换行、缩进和注释也会导致元素非空，常用于隐藏未填充容器或表单验证等场景。

使用 CSS 的 :empty 伪类可以选择页面中“真正为空”的元素。所谓“空”，指的是元素内部没有任何内容，包括文本、空格、换行、子元素等。

什么是:empty选择器？

:empty 是一个结构伪类，用于匹配没有子节点的元素。这里的“子节点”包括：

• 文本内容（哪怕是一个空格）
• HTML标签（子元素）
• 注释节点

只要存在其中任意一种，该元素就不算“空”，:empty 就不会匹配。

基本用法示例

 

内容

CSS 中使用 :empty：

.box:empty {
  background-color: lightgreen;
  height: 50px;
  border: 1px dashed green;
}

只有第一个 会被选中并应用样式，因为它是真正空的。

第二个包含一个空格，第三个包含一个

常见注意事项

实际开发中容易忽略的细节：

• 换行和缩进也算内容：如果 HTML 中元素换行书写，浏览器会解析出空白文本节点，导致不为空
• 注释也算内容： 不是空元素
• 仅包含全角空格或特殊空白字符（如 ）仍被视为非空

实用场景建议

可用于以下情况：

• 隐藏未填充的容器：比如动态内容加载前的占位块
• 表单验证提示：当输入框无值时显示特殊样式（配合 JS 更好）
• 排版优化：避免空 div 影响布局

基本上就这些。关键在于理解“空”的严格定义——任何可见或不可见的内容都会让元素不再“空”。