当元素既无子节点又是父容器中唯一子元素时，可联合使用:empty和:only-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 可能为空且是唯一元素，可用：
.message:empty:only-child {
display: none;
}
来隐藏它，防止页面出现空白块。
注意事项
注意空白符会影响 :empty 判断。哪怕只有一个空格或换行，元素就不算“空”。例如：
不会被 :empty 匹配
因此在使用模板或服务端渲染时要小心多余空格。
基本上就这些，组合使用很直接，关键是理解两个伪类的逻辑交集。不复杂但容易忽略细节。
