:only-child 在元素是父容器中唯一子元素时生效，无论类型；2. :only-of-type 在元素是同类型中唯一一个时生效，允许其他类型兄弟节点存在；二者区别在于匹配范围，合理使用可减少类名依赖，提升样式效率。
:only-child 和 :only-of-type 是 CSS 中用于精确控制子元素样式的伪类选择器，它们帮助开发者在特定条件下为元素添加样式，而无需额外的类名或 JavaScript。
:only-child：唯一子元素时生效
当一个元素是其父容器中唯一的子元素时，:only-child 会匹配该元素。这意味着它没有兄弟节点，不论类型。
例如：
- 如果某个 div 只包含一个 p 标签，那么这个 p 就是 :only-child。
- 如果有多个子元素（哪怕只有一个可见），:only-child 就不会生效。
常见用途：避免在列表项多于一个时应用特殊边距或背景。
立即学习“前端免费学习笔记（深入）”；
示例：
p:only-child {
color: red;
font-weight: bold;
}
只有当 p 是父元素中唯一的子元素时，文字才会变红加粗。
:only-of-type：同类型唯一时生效
:only-of-type 更加灵活，它表示该元素在其父容器中是某一类型中的唯一一个。比如，即使有其他不同标签存在，只要它是唯一的 p 或唯一的 img，就能被选中。
典型场景：
- 一篇文章中只有一张图片，想给这张图加边框或居中。
- 段落只有一个时调整行高或字体大小。
img:only-of-type {
display: block;
margin: 0 auto;
border: 2px solid #ccc;
}
即使 img 前后有 h2、p 等其他标签，只要页面中只有一个 img，样式就会生效。
两者区别关键在于“所有子元素”和“同类元素”的范围差异。使用时根据结构需求选择，能有效减少冗余类名，提升样式维护性。
基本上就这些，用对了很省事。
