当页面中某类元素只有一个实例时，使用:only-of-type可精准设置其样式，如为单独的段落、图片或标题添加背景、边距等，提升布局美观性。该伪类选择父元素下某类型唯一子元素，不要求其为唯一子节点，仅需类型唯一即可。例如.article img:only-of-type可为单张图片添加居中、背景色和边框，避免多图样式混乱；同样适用于单段文字、独立标题或单独媒体内容的样式优化，增强视觉协调性。
当页面中某类元素只有一个实例时，使用 :only-of-type 伪类可以精准地为这个唯一的元素设置样式。它常用于内容布局优化，比如调整单独存在的段落、图片或容器的背景和间距，使页面视觉更协调。
理解 :only-of-type 的作用
:only-of-type 选择器匹配的是其父元素下某一特定类型的唯一子元素。例如，如果一个 div 中只有一个 p 元素，那么这个 p 就会匹配 p:only-of-type。
与 :only-child 不同，:only-of-type 不要求该元素是唯一的子元素，只要求是该类型（如 p、img、h2 等）中唯一的即可。这意味着即使还有其他 span 或 div，只要只有一个 p，它仍会被选中。
结合 :only-of-type 设置背景样式
在实际开发中，我们常希望当某个内容区域只包含一张图片或一段文字时，为其添加特殊的背景以突出显示。这时可以结合 :only-of-type 来动态控制样式。
立即学习“前端免费学习笔记（深入）”；
例如：文章容器中若只有一张图片，可将其居中并添加浅色背景和边框：
.article img:only-of-type {
display: block;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 8px;
}
这样，仅当文章中只有一张图片时，才会应用这些美化样式，避免多图情况下样式混乱。
实用场景示例
以下是一些典型用法，帮助你在不同情境下合理使用 :only-of-type 调整背景和布局：
- 单段说明文字：如果说明区块中只有一个 p，可增加内边距和背景色使其更醒目
- 独立标题处理：当某个 section 中只有一个 h2，可调整其字体颜色和背景线条
- 媒体内容优化：视频或图表单独存在时，通过 :only-of-type 添加阴影或外边距提升可读性
基本上就这些。合理利用 :only-of-type，能让页面在内容变化时依然保持良好的视觉结构，不复杂但容易忽略。
