:empty伪类应用演示
<style>.artBox { font-size: 20px; margin: 30px auto; max-width: 1200px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }
.artBox h2 { color: #1a73e8; border-bottom: 2px solid #eee; padding-bottom: 8px; margin-bottom: 20px; }
.artBox > p { margin: 10px 0; line-height: 1.8; text-align: justify; }
.artBox blockquote { background: #f9f9f9; border-left: 4px solid #1a73e8; padding: 15px 20px; color: #555; }
.artBox code { background: teal; color: yellow; padding: 2px 6px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95em; }
.artBox .mid { text-align: center; }
</style>
<div class="artBox">
<blockquote>
<code>:empty</code> CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。<br>
匹配没有子节点的元素在前端应用中被广泛使用，学会<code>:empty</code>伪类意义重大。
</blockquote>
<p>以下代码演示了何种情形下元素会匹配 <code>:empty</code> 伪类，匹配者背景将渲染为银白色（预览效果时，没有文字的元素可将鼠标指针移到其上查看说明）：</p>
<div class="codebox" data-prev="1">
<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>
</div>
<p>【注意】元素的HTML代码结构决定其是否匹配 :empty 伪类选择器，例如示例中的 No.6 有一个空格、No.7 有一个空行（空行被视为空格）、No.9 有独立成行的注释（存在空格、空行），这些都是文本节点，和 No.1、No.2 有实际的文本节点对等，都不能被 <code>:empty</code> 伪类匹配，而 No.10 有一个<code><span></code>子元素，自然也不会被匹配；其余div标签，No.3、No.4、No.5、No.8 都匹配 <code>:empty</code> 伪类样式，所以显示背景色为银白色。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/helight/linenumber.js';
linenumber();
</script> 元素的HTML代码结构决定其是否匹配 :empty 伪类选择器，这个匹配是自动？匹配好了有什么用呢？ 红影 发表于 2026-3-28 13:26
元素的HTML代码结构决定其是否匹配 :empty 伪类选择器，这个匹配是自动？匹配好了有什么用呢？
匹配好了就可以成家立业 又一个新知识点——有趣的:empty伪类 应用，谢谢马老师经典讲授{:4_190:} 杨帆 发表于 2026-3-28 22:59
又一个新知识点——有趣的:empty伪类 应用，谢谢马老师经典讲授
这个做帖子基本用不上 马黑黑 发表于 2026-3-28 20:40
匹配好了就可以成家立业
哈哈，黑黑真幽默{:4_172:} 红影 发表于 2026-3-29 23:19
哈哈，黑黑真幽默
匹配是检索需求。如果你是Web设计和实现者，或者是维护者，各类检索方式都是刚需，而CSS检索是性价比最高的、性能也是最好的 马黑黑 发表于 2026-3-29 23:39
匹配是检索需求。如果你是Web设计和实现者，或者是维护者，各类检索方式都是刚需，而CSS检索是性价比最高 ...
原来是为检索所需的，因为平日碰到比较少，所以一下子没反应过来它的用途。 红影 发表于 2026-3-31 22:37
原来是为检索所需的，因为平日碰到比较少，所以一下子没反应过来它的用途。
做个帖子一般用不上这个，但大神做的可能除外 马黑黑 发表于 2026-4-1 07:55
做个帖子一般用不上这个，但大神做的可能除外
大神用到的肯定很多啊，躲到无法想象。
页:
[1]