:only-child 选择父元素中唯一子元素，而 :only-of-type 选择同类型标签中唯一的元素；2. 前者要求该元素是独生子，后者允许其他类型兄弟元素存在；3. 实际应用如单张图片居中、单一列表项突出显示、单输入框占满容器等场景；4. 掌握二者区别可精准控制样式，避免依赖类名或 JavaScript。
当需要为页面中唯一的子元素或特定类型的唯一元素设置样式时，CSS 提供了两个非常实用的伪类选择器：:only-child 和 :only-of-type。它们看似相似，但匹配逻辑不同，适用于不同的场景。
:only-child：仅有一个子元素时生效
:only-child 选择器用于选中其父元素中唯一一个子元素。也就是说，如果某个元素是其父容器中唯一的子节点，它就会被选中。
例如：
<div> <p>我是唯一的子元素</p> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
p:only-child {
color: blue;
font-weight: bold;
}
此时段落文字会变成蓝色加粗，因为它是 div 中唯一的子元素。
但如果父元素中有多个子元素：
<div> <p>段落1</p> <p>段落2</p> </div>
那么 p:only-child 就不会匹配任何元素，因为没有一个 p 是唯一的子元素。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
:only-of-type：同类型中唯一时生效
:only-of-type 更加灵活，它选择的是在父元素中某一类型（标签名）的唯一元素。即使还有其他类型的兄弟元素，只要该类型只有一个，就能被选中。
例如：
<div> <p>唯一的段落</p> <span>一些文字</span> <span>另一个 span</span> </div>
尽管 div 有三个子元素，但 p 是唯一一个 p 类型的标签。因此：
p:only-of-type {
color: green;
}
这个段落会被应用绿色文本，而两个 span 不影响 p 的匹配。
相反，如果出现两个 p 标签，哪怕其他类型元素更多，:only-of-type 也不会生效。
实际应用场景
这两个伪类在响应式设计和动态内容中特别有用：
- 文章页只有一张图片时，让它居中并放大展示 —— 使用 img:only-of-type
- 列表项只有一条数据时，增加边距或背景突出显示 —— 使用 li:only-child
- 表单中只有一个输入框时调整宽度占满容器 —— input:only-of-type
基本上就这些。掌握 :only-child 和 :only-of-type 的区别，能让你更精准地控制单一元素的样式，无需额外类名或 JavaScript 判断。关键是理解“整个子元素中唯一”和“同类标签中唯一”的差异。不复杂但容易忽略。
