:empty
Baseline 广泛可用 *
:empty CSS 伪类表示没有任何子元素的元素。子元素可以是元素节点或文本（包括空白）。注释、处理指令和 CSS content 不会影响元素是否被视为空。
试一试
div:empty {
outline: 2px solid deeppink;
height: 1em;
}
<p>Element with no content:</p>
<div></div>
<p>Element with comment:</p>
<div><!-- A comment --></div>
<p>Element with nested empty element:</p>
<div><p></p></div>
注意：在 Selectors Level 4 中，:empty 伪类被更改为类似于 :-moz-only-whitespace，但目前还没有浏览器支持。
语法
css
:empty {
/* ... */
}
无障碍
屏幕阅读器等辅助技术无法解析空的交互式内容。所有交互式内容都必须有一个可访问名称，该名称通过为交互式控件的父元素（锚点、按钮等）提供文本值来创建。可访问名称将交互式控件暴露给可访问性树，这是一个用于与辅助技术通信信息的 API。
提供交互式控件可访问名称的文本可以使用属性组合隐藏，这些属性可以在视觉上将其从屏幕上移除，但仍可被辅助技术解析。这通常用于仅依靠图标传达目的的按钮。
示例
HTML
html
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
<!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
<p>
<!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
</p>
</div>
CSS
css
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}
结果
规范
| 规范 |
|---|
| 选择器 Level 4 # the-empty-pseudo |
浏览器兼容性
加载中…