:empty - CSS（层叠样式表） 编辑

:empty CSS 伪类 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

/* Selects any <div> that contains no content */
div:empty {
  background: lime;
}

语法

:empty

例子

HTML

<div class="box"><!-- I will be lime --></div>
<div class="box">I will be pink</div>
<div class="box">
    <!-- I will be red because of the whitespace around this comment -->
</div>

CSS

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

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

.box:empty {
    background: lime;
}

Result

规范

Specification	Status	Comment
Selectors Level 4 :empty	Working Draft	No change.
Selectors Level 3 :empty	Recommendation	Initial definition.

浏览器兼容

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参考

• :blank

example

https://codepen.io/xgqfrms/full/zQEJWw