17370845950

:empty 用于选中无任何内容的元素，常用于隐藏空容器或设置默认样式；:only-child 用于选中父元素中唯一的子元素，适用于单一项目的特殊排版。两者分别基于内容是否为空和子元素数量关系进行匹配，可结合使用提升CSS智能性与表现力。

在CSS中，:empty 和 :only-child 是两个非常实用的伪类选择器，它们分别用于匹配特定状态下的元素，帮助开发者更精细地控制页面样式。虽然名称相似，但两者的用途和行为完全不同。下面详细说明它们的应用场景与区别。

:empty — 选中完全为空的元素

:empty 伪类用来选择那些内部没有任何内容的元素。这里的“空”指的是没有文本内容、子元素、注释或空白符。

常见应用场景包括：

• 隐藏没有内容的容器，避免布局错位
• 为占位元素添加默认样式
• 表单中处理未填写的字段提示

示例：

   
内容

CSS样式：

.box:empty {
  display: none; /* 隐藏完全为空的盒子 */
}

这样可以自动清理页面中无意义的空标签，提升视觉整洁度。

:only-child — 选中唯一的子元素

:only-child 匹配的是其父元素中**唯一一个子元素**的元素。也就是说，如果某个元素的父级只有一个直接子元素，那么这个子元素就会被选中。

这个伪类适合用于条件性样式控制，比如：

• 列表只有一项时使用特殊样式
• 图片容器中仅有一张图时居中显示
• 简化单一内容块的排版

示例：

  
唯一项目


项目1
项目2

CSS样式：

li:only-child {
  color: green;
  font-weight: bold;
}

只有第一个列表中的 li 会被加粗并变绿，因为它是其父元素中唯一的子元素。

两者对比与注意事项

虽然名字都带“唯一”或“空”的含义，但逻辑完全不同：

• :empty 关注元素自身是否包含内容
• :only-child 关注元素在其父级中的数量位置关系
• 一个元素可以同时满足两个条件，也可以都不满足

例如：

其中 p:empty 成立（内容为空），且 p:only-child 也成立（是 div 的唯一子元素）。

实际开发中建议结合使用这些伪类实现更智能的样式逻辑，减少不必要的JavaScript干预。

基本上就这些，掌握好 :empty 和 :only-child 能让你的CSS更具表达力和适应性。