:empty伪类可精准选中无内容元素，用于隐藏空容器或添加占位样式，需注意空格和换行会使其失效，现代浏览器均支持。

CSS 中确实可以精准选择空元素，这主要依赖于 :empty 伪类。它能帮助开发者选中页面中不包含任何内容（包括文本、子元素、空格等）的元素，从而实现更有针对性的样式控制。

什么是:empty伪类？

:empty 是一个结构化伪类，用于匹配那些内部没有任何内容的元素。这里的“空”指的是元素节点内既没有子元素，也没有文本内容，甚至连换行和空格都不能有。

例如：

<div></div>          /* 被 :empty 选中 */
<span></span>        /* 被 :empty 选中 */
<p> </p>            /* 不被选中（包含空格） */
<li>内容</li>       /* 不被选中（包含文本） */
<td><img src="..."></td> /* 不被选中（包含子元素） */

如何使用:empty设置样式？

你可以像使用其他伪类一样，在CSS中直接应用 :empty 来隐藏或标记空元素。

立即学习“前端免费学习笔记（深入）”；

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

常见用途包括：

• 隐藏无内容的容器，避免布局错位
• 为缺失数据的单元格添加占位样式
• 在表单中提示必填项为空

示例代码：

/* 隐藏完全为空的 div */
div:empty {
  display: none;
}
<p>/<em> 给空的表格单元格添加虚线边框 </em>/
td:empty::after {
content: "—";
color: #999;
}</p>

注意事项与兼容性

使用 :empty 时需注意以下几点：

• 即使元素内只有一个空格或换行符，也不会被视为“空”
• 注释节点（<!-- -->）不影响 :empty 的判断
• 现代浏览器普遍支持 :empty，IE8 及更早版本不支持

如果需要兼容老版本浏览器，可结合JavaScript动态处理空元素。

基本上就这些。合理使用 :empty 能让样式更智能，减少冗余HTML结构，提升页面维护效率。