: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 不会影响元素是否被认定为空。

尝试一下

备注:选择器 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

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

.box:empty {
  background: lime;
}

结果

无障碍考虑

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

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

规范

Specification
Selectors Level 4
# the-empty-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:empty
Matches elements with whitespace

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见