当元素既无子节点又是父容器中唯一子元素时，可联合使用:empty和:%ignore_a_1%nly-child进行样式控制，如div:empty:only-child{background-color:yellow;}，常用于隐藏空消息框等场景，需注意空白符会影响:empty判断。
当需要针对既没有子元素又是其父容器中唯一子节点的元素进行样式控制时，可以联合使用 :empty 和 :only-child 两个伪类。
:empty 和 :only-child 的作用
:empty 选择没有任何子节点（包括文本节点）的元素。
:only-child 选择在其父元素中唯一的子元素。
将两者结合使用时，表示：该元素既是唯一的子元素，又内容为空。例如：
div:empty:only-child {
background-color: yellow;
}
这条规则会选中那些：
– 是 div 元素
– 没有内容（包括空格、换行）
– 在其父元素中是唯一的子元素
典型使用场景
这种组合常用于动态内容的样式处理，比如：
立即学习“前端免费学习笔记（深入）”；
当某个容器预期显示内容但数据为空时，提示用户“暂无数据”避免空元素占据不必要的视觉空间在列表项中仅剩一个且为空时特殊处理
例如，你有一个消息区域：
若 .message 可能为空且是唯一元素，可用：
稿定抠图
AI自动消除图片背景
76 查看详情
.message:empty:only-child {
display: none;
}
来隐藏它，防止页面出现空白块。
注意事项
注意空白符会影响 :empty 判断。哪怕只有一个空格或换行，元素就不算“空”。例如：
不会被 :empty 匹配
因此在使用模板或服务端渲染时要小心多余空格。
基本上就这些，组合使用很直接，关键是理解两个伪类的逻辑交集。不复杂但容易忽略细节。
以上就是css伪类:empty与:only-child如何联合使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1023498.html
微信扫一扫 
支付宝扫一扫 
