:empty

:empty CSS 伪类表示任何没有子元素的元素。子元素可以是元素节点或文本（包括空格）。注释、处理指令和 CSS content 不会影响元素是否被视为为空。

试一试

注意：在选择器级别 4 中，:empty 伪类被更改为类似于 :-moz-only-whitespace，但目前还没有浏览器支持此功能。

语法

css

:empty {
  /* ... */
}

无障碍访问

屏幕阅读器等辅助技术无法解析为空的交互式内容。所有交互式内容都必须具有可访问名称，该名称是通过为交互式控件的父元素提供文本值创建的（锚点、按钮等）。可访问名称将交互式控件公开给辅助功能树，这是一个用于辅助技术的 API，它传达对辅助技术有用的信息。

提供交互式控件的可访问名称的文本可以使用属性组合隐藏，这些属性在视觉上将其从屏幕中移除，但保持辅助技术可解析。这通常用于仅依赖图标来传达目的的按钮。

示例

HTML

html

<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>

CSS

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

css

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

.box:empty {
  background: lime;
}

结果

规范

规范
选择器级别 4 # the-empty-pseudo

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

:-moz-only-whitespace – 前缀选择器级别 4 中更改的实现
:blank