当元素既无子节点又是父容器中唯一子元素时，可联合使用:empty和:only-child进行样式控制，如div:empty:only-child{background-color:yellow;}，常用于隐藏空消息框等场景，需注意空白符会影响:empty判断。
当需要针对既没有子元素又是其父容器中唯一子节点的元素进行样式控制时，可以联合使用 :empty 和 :only-child 两个伪类。
:empty 选择没有任何子节点（包括文本节点）的元素。
:only-child 选择在其父元素中唯一的子元素。
将两者结合使用时，表示：该元素既是唯一的子元素，又内容为空。例如：
div:empty:only-child {
background-color: yellow;
}
这条规则会选中那些：
- 是 div 元素
- 没有内容（包括空格、换行）
- 在其父元素中是唯一的子元素
这种组合常用于动态内容的样式处理，比如：
立即学习“前端免费学习笔记（深入）”；
例如，你有一个消息区域：
<section>
<div class="message"></div>
</section>
若 .message 可能为空且是唯一元素，可用：
.message:empty:only-child {
display: none;
}
来隐藏它，防止页面出现空白块。
注意空白符会影响 :empty 判断。哪怕只有一个空格或换行，元素就不算“空”。例如：
<span> </span> 不会被 :empty 匹配
因此在使用模板或服务端渲染时要小心多余空格。
基本上就这些，组合使用很直接，关键是理解两个伪类的逻辑交集。不复杂但容易忽略细节。
以上就是css伪类:empty与:only-child如何联合使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
402
收藏
