:empty

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

尝试一下

div:empty {
  outline: 2px solid deeppink;
  height: 1em;
}

Element with no content:


Element with comment:


Element with nested empty element:

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

css

:empty {
  /* ... */
}

html


我将会是粉色。

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