:empty伪类应用演示

马黑黑

:empty CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。
匹配没有子节点的元素在前端应用中被广泛使用，学会:empty伪类意义重大。

以下代码演示了何种情形下元素会匹配 :empty 伪类，匹配者背景将渲染为银白色（预览效果时，没有文字的元素可将鼠标指针移到其上查看说明）：

<style> /* flex容器 */ .wrapBox { margin: 30px auto; width: 80vw; display: flex; justify-content: flex-start; flex-flow: row wrap; gap: 20px; border: 1px solid gray; } /* flex项目 */ .sonBox { /* 宽度设计 ：父元素宽度的25%，考虑项目间距 */ width: calc(25% - (20px - 20px * 0.25)); height: 20vh; background: tan; padding: 20px; /* 项目尺寸包含边距以确保精准占满父元素水平空间 */ box-sizing: border-box; } /* 项目元素伪元素 : 提供信息 */ .sonBox::before { content: attr(data-msg); } /* 内容为空的项目背景色为银色 */ .sonBox:empty { background: silver; } .tMid { text-align: center; } </style> <h2 class="tMid">匹配 :empty 伪类演示</h2> <div class="wrapBox"> <div class="sonBox">No.1：没有伪元素</div> <div class="sonBox">No.2：没有伪元素</div> <div class="sonBox" title="No.3：这个div啥都没有"></div> <div class="sonBox" data-msg="" title="No.4：这个div有before伪元素，before内容为空"></div> <div class="sonBox" data-msg="No.5 伪元素信息：div里除了before伪元素啥都没有"></div> <div class="sonBox" data-msg="No.6 伪元素信息：div里有一个空格"> </div> <div class="sonBox" data-msg="No.7 伪元素信息：div里有一个空行"> </div> <div class="sonBox" data-msg="No.8 伪元素信息：div里有不断行的注释"><!-- 注释 --></div> <div class="sonBox" data-msg="No.9 伪元素信息：div里的注释断行（相当于div有空行、空格）"> <!-- 注释 --> </div> <div class="sonBox" data-msg="No.10 伪元素信息：div里有span元素"><span></span></div> </div>

【注意】元素的HTML代码结构决定其是否匹配 :empty 伪类选择器，例如示例中的 No.6 有一个空格、No.7 有一个空行（空行被视为空格）、No.9 有独立成行的注释（存在空格、空行），这些都是文本节点，和 No.1、No.2 有实际的文本节点对等，都不能被 :empty 伪类匹配，而 No.10 有一个<span>子元素，自然也不会被匹配；其余div标签，No.3、No.4、No.5、No.8 都匹配 :empty 伪类样式，所以显示背景色为银白色。

红影

元素的HTML代码结构决定其是否匹配 :empty 伪类选择器，这个匹配是自动？匹配好了有什么用呢？