:empty 用于选中无任何内容的元素，常用于隐藏空容器或设置默认样式；:only-child 用于选中父元素中唯一的子元素，适用于单一项目的特殊排版。两者分别基于内容是否为空和子元素数量关系进行匹配，可结合使用提升CSS智能性与表现力。
在CSS中，:empty 和 :only-child 是两个非常实用的伪类选择器，它们分别用于匹配特定状态下的元素，帮助开发者更精细地控制页面样式。虽然名称相似，但两者的用途和行为完全不同。下面详细说明它们的应用场景与区别。
:empty — 选中完全为空的元素
:empty 伪类用来选择那些内部没有任何内容的元素。这里的“空”指的是没有文本内容、子元素、注释或空白符。
注意： 即使元素中有空格或换行，它也不再被视为“空”。常见应用场景包括：
- 隐藏没有内容的容器，避免布局错位
- 为占位元素添加默认样式
- 表单中处理未填写的字段提示
示例：
立即学习“前端免费学习笔记（深入）”；
<div class="box"></div> <div class="box"> </div> <!-- 包含空格，不被:empty匹配 --> <div class="box">内容</div>
CSS样式：
.box:empty {
display: none; /* 隐藏完全为空的盒子 */
}
这样可以自动清理页面中无意义的空标签，提升视觉整洁度。
:only-child — 选中唯一的子元素
:only-child 匹配的是其父元素中**唯一一个子元素**的元素。也就是说，如果某个元素的父级只有一个直接子元素，那么这个子元素就会被选中。
这个伪类适合用于条件性样式控制，比如：
- 列表只有一项时使用特殊样式
- 图片容器中仅有一张图时居中显示
- 简化单一内容块的排版
示例：
立即学习“前端免费学习笔记（深入）”；
<ul> <li>唯一项目</li> </ul> <p><ul> <li>项目1</li> <li>项目2</li> </ul></p>
CSS样式：
li:only-child {
color: green;
font-weight: bold;
}
只有第一个列表中的 li 会被加粗并变绿，因为它是其父元素中唯一的子元素。
两者对比与注意事项
虽然名字都带“唯一”或“空”的含义，但逻辑完全不同：
- :empty 关注元素自身是否包含内容
- :only-child 关注元素在其父级中的数量位置关系
- 一个元素可以同时满足两个条件，也可以都不满足
例如：
<div> <p></p> </div>
其中 p:empty 成立（内容为空），且 p:only-child 也成立（是 div 的唯一子元素）。
实际开发中建议结合使用这些伪类实现更智能的样式逻辑，减少不必要的JavaScript干预。
基本上就这些，掌握好 :empty 和 :only-child 能让你的CSS更具表达力和适应性。
