:empty
尝试一下
备注:在选择器 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 |
浏览器兼容性
BCD tables only load in the browser
参见
:-moz-only-whitespace
非标准 是选择器 Level 4 更改的前缀实现。:blank
实验性