17370845950

:empty 伪类选择器用于选中完全无内容的元素，包括无文本、子元素、空白字符等。例如 div:empty 可为无内容的 div 添加样式。只有当元素内真正为空时才匹配，含空格、换行、注释或子元素均不匹配。常用于隐藏空提示框 .tip:empty { display: none; } 或为 td:empty 设置占位符 ::before { content: "—"; }。关键在于确保元素内无任何字符或节点，否则无法生效。

:empty 是 CSS 中的一个伪类选择器，用于选中没有任何内容的元素。这里的“空”指的是元素内部没有文本内容、子元素、图片、表单控件等任何可见或不可见的内容（包括空白字符和换行）。

基本语法

element:empty { 样式规则 }

例如，给所有空的 div 添加边框：

div:empty { border: 1px dashed #ccc; }

什么情况算“空”？

只有当元素完全为空时，:empty 才会生效。以下情况被视为“非空”：

• 包含文本内容（即使是空格）
• 有子元素（包括注释节点）
• 包含换行或制表符等空白字符（在某些情况下也会被当作内容）

例如：

✅ 匹配 :empty

❌ 不匹配（包含空格）

实用场景示例

常用于表单或列表中提示空状态：

比如隐藏空的提示容器：

.tip:empty { display: none; }

或者为没有内容的单元格设置占位样式：

td:empty::before { content: "—"; color: #999; }

基本上就这些。关键是理解“空”的定义——真正的一无所有。稍微有点内容，:empty 就不会生效。处理时建议确保元素内无空格或换行，否则可能无法命中预期样式。不复杂但容易忽略细节。