:empty 是 CSS 中匹配完全为空元素的选择器，即无子元素、无文本节点（含空格换行）、无内容；属性不影响判断，但空白字符会导致失效，不支持 IE8 及以下，可用 JavaScript 配合 class 替代。
:empty 是 CSS 中用于匹配完全为空的元素的选择器，即该元素既没有子元素（包括文本节点、空格、换行符等），也没有任何内容。
什么算“空”？
以下情况会被 :empty 匹配：
-
<div></div>—— 纯空标签 -
<p><span></span></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/gongju/2870" title="Gradle 9.8.0"><img src="https://img.php.cn/upload/manual/001/431/639/6ad9ce71d8cb6379.png" alt="Gradle 9.8.0" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/gongju/2870" title="Gradle 9.8.0">Gradle 9.8.0</a> <p></p> </div> <a href="/xiazai/gongju/2870" title="Gradle 9.8.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>—— 子元素存在但自身无内容且子元素也为空（注意：<p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>可被匹配，但<p><span></span></p>中p不为空 —— 它含有span元素，所以 不匹配）
以下情况不会被匹配：
-
<div> </div>—— 含空格或换行（即存在文本节点） -
<span>Hello</span>—— 有文字内容 -
<div><img alt="css判断元素是否为空怎么写样式_使用css:empty选择器" ></div>—— 有子元素 -
<div title="test"></div>—— 属性不影响 :empty 判断
:empty 的基本用法
直接在选择器中使用 :empty 即可：
p:empty { display: none; }
li:empty::before { content: "（暂无内容）"; color: #999; }
注意事项与常见误区
- 空白字符不算“空”：HTML 中的换行、缩进、空格都会生成文本节点，导致 :empty 失效。建议服务端/JS 渲染时清理空白，或改用 JS 判断
-
不能链式伪类：如
div:empty:hover是合法的，但div:empty::before:hover无效（伪元素上不能加交互伪类） -
无法检测“视觉上为空”：比如含
display:none子元素、或仅含不可见字符（\u200B）的元素，:empty 仍会返回 false - 不支持 IE8 及更早版本，现代浏览器均支持
替代方案（当 :empty 不适用时）
如果需要更灵活的“内容为空”判断（如忽略空白、支持动态内容），需借助 JavaScript：
- 用
element.innerText.trim() === ""或element.textContent.replace(/\s/g, "") === "" - 配合 class 控制样式，例如 JS 检测后添加
is-empty类，再写.is-empty { ... }
