:empty

:empty CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。

尝试一下

备注： 在选择器 Level 4 中，:empty 伪类被更改为与 :-moz-only-whitespace 类似一样的行为，但目前还没有浏览器支持它。

语法

css

:empty {
  /* ... */
}

示例

HTML

html

<div class="box"><!-- 它将呈现为青柠色。 --></div>
<div class="box">我将会是粉色。</div>
<div class="box">
  <!-- 由于这个注释周围存在空格，所以它将在旧版本的浏览器中呈现为粉色。 -->
</div>
<div class="box">
  <p>
    <!-- 由于这个注释周围存在无法折叠的空格和元素，所以它将在所有浏览器中呈现为粉色。 -->
  </p>
</div>

CSS

body {
  display: flex;
  justify-content: space-around;
}

css

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

结果

无障碍考虑

辅助技术（如屏幕阅读器）无法解析交互内容为空的情况。所有交互内容必须具有无障碍名称，这是通过为交互控件的父元素（如锚点、按钮等）提供文本值来创建的。无障碍名称将交互控件暴露给无障碍树，这是一个传达对辅助技术有用的信息的 API。

提供交互控件的无障碍名称的文本可以使用一些属性的组合进行隐藏，这些属性可以将其在视觉上从屏幕上移除，但可以被辅助技术解析。这通常用于仅依靠图标来传达目的的按钮。

规范

Specification
Selectors Level 4 # the-empty-pseudo

浏览器兼容性

BCD tables only load in the browser

参见

:-moz-only-whitespace 非标准是选择器 Level 4 更改的前缀实现。
:blank 实验性