使用 :only-child 伪类可为容器中唯一子元素设置样式,当且仅当该元素是其父元素的唯一直接子元素时生效,常用于动态内容中的单条数据或提示信息的特殊样式处理。

当你想为容器中唯一一个子元素设置样式时,可以使用 CSS 的 :only-child 伪类选择器。它会选中父元素中仅有的那个子元素,如果子元素数量不是1,就不会生效。
基本语法
父元素 > :only-child { 样式声明 }或者直接写在目标元素上:
元素:only-child { 样式声明 }实际例子
假设你有一个列表,有时只包含一项,你想让这一项特别醒目:
这是唯一的段落
立即学习“前端免费学习笔记(深入)”;
你可以这样写 CSS:
.list p:only-child {color: red;
font-weight: bold;
}
结果是:第一个 会变红加粗,第二个例子中的两个段落都不会被选中,因为它们都不是“唯一子元素”。
注意点
- :only-child 只关心它是不是唯一的直接子元素,不管类型
- 空白文本节点或注释也算“子元素”,可能影响判断(但通常浏览器会忽略空格影响)
- 常用于动态内容场景,比如消息提示、单条数据展示等需要特殊样式的唯一项
基本上就这些。只要记住:有且仅有一个子元素时,:only-child 才起作用。










