: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.
尝试一下
备注:
在选择器 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;
}
结果
无障碍考虑
规范
Specification |
---|
Selectors Level 4 # the-empty-pseudo |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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.
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.
参见
:-moz-only-whitespace
非标准 是选择器 Level 4 更改的前缀实现。:blank
实验性