:empty伪类仅匹配完全无内容（无子元素、无文本节点、不含空格换行符）的容器元素；自闭合标签及含空白字符或空子元素的元素均不匹配。
:empty 是 CSS 中专门用于匹配完全不包含任何内容（包括文本、子元素、空格、换行符等）的元素的伪类。
什么算“空”？
只有当一个元素：
- 没有子元素（包括注释节点以外的所有节点）
- 没有文本内容（哪怕是一个空格、一个换行符、一个制表符都不行）
- 不是自闭合标签（如 <img alt="css只想选中空内容的元素怎么办_使用:empty伪类过滤无内容节点" >、<br> 等本身不接受内容的标签，不会被 :empty 匹配）
常见误判场景
以下情况不会被 :empty 匹配：
- <div> </div>（含空格）
- <div></div>\n（父容器换行也算文本节点）
- <div><span></span></div>（含空子元素）
- <input> 或 <img alt="css只想选中空内容的元素怎么办_使用:empty伪类过滤无内容节点" >（它们不是容器型元素，且规范中明确排除）
实用写法示例
想隐藏所有真正为空的 <li> 或 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>：li:empty, p:empty { display: none; }
想给空表格单元格加边框提示：td:empty { border: 1px dashed #ccc; }
注意：无法用 :empty 判断“仅含空白字符”
如果元素里只有空格或换行，它不是 empty。此时需借助 JavaScript 预处理（如 trim 后判断是否为空），或使用 :has() + 属性标记（如添加 data-empty="true"）辅助判断。
