:only-child选择父元素中唯一的子元素，如p:only-child{color:red}仅当p是其父元素的唯一子元素时生效，与:only-of-type不同的是它不区分类型且要求无其他兄弟元素。
在 CSS 中，:only-child 伪类用于选择某个元素，当它是其父元素中唯一的子元素时生效。也就是说，如果一个父元素只有一个子元素，那么这个子元素就会被 :only-child 匹配。
基本语法
selector:only-child { 样式声明 }例如，你想给某个容器中唯一的 <p> 元素添加特殊样式：
p:only-child {
color: red;
font-weight: bold;
}这段代码的意思是：只有当 <p> 是其父元素的唯一子元素时，才应用红色加粗样式。
使用场景示例
假设有以下 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div> <p>我是唯一的段落</p> </div> <div> <p>第一个段落</p> <p>第二个段落</p> </div> <div> <span>其他元素</span> </div>
上面第一个 <div> 中只有一个 <p>，所以它会匹配 p:only-child，样式生效。第二个 <div> 有两个 <p>，都不满足“唯一子元素”的条件，因此不匹配。第三个 <div> 虽然只有一个子元素，但它是 <span>，不是 <p>，所以 p:only-child 不会选中任何东西。
与 :only-of-type 的区别
:only-child 判断的是“是否是唯一的子元素”，不管类型。
:only-of-type 判断的是“该类型的元素是否只有一个”，允许其他类型的兄弟元素存在。
举例说明：
```html段落1
段落2
辅助文字p:only-child {
background: yellow;
}只有第一个 <p> 会被选中，因为它是父元素中唯一的子元素。第二个 <p> 虽然是唯一的 <p>，但它不是唯一的子元素（还有 <span>），所以 :only-child 不匹配。
实用建议
- 适用于需要根据子元素数量动态调整样式的场景，比如只有一项时居中、加大字体等。
- 常用于列表、卡片、提示框等组件中处理单一内容的显示效果。
- 注意空格和换行不会被当作元素，所以不影响
:only-child判断。
基本上就这些。用好 :only-child 可以减少不必要的类名，让样式更智能。
