:empty

: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

.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.

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:emptyChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 3.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
Matches elements with whitespace
Experimental
Chrome No support NoEdge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1106296.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

参考

example

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