简介

:empty CSS 伪类 代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格),无论一个元素是否为 (empty 或 not), 注释或处理指令都不会产生影响。

语法

<element>:empty { /* style properties */ }




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

例子

CSS

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


.box {
    background: red;
    height: 200px;
    width: 200px;
}

.box:empty {
    background: lime;
}

HTML

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

Result

细则

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

浏览器兼容

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1) 9.5 10.0 3.1

文档标签和贡献者

此页面的贡献者: xgqfrms-GitHub, DaPanda, FredWe
最后编辑者: xgqfrms-GitHub,