CSS伪类选择器:only-child和:only-of-type应用_单独元素样式

: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 是唯一的子元素。

有道智云AI开放平台

有道智云AI开放平台

116

查看详情

: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 判断。关键是理解“整个子元素中唯一”和“同类标签中唯一”的差异。不复杂但容易忽略。

以上就是CSS伪类选择器:only-child和:only-of-type应用_单独元素样式的详细内容，更多请关注php中文网其它相关文章！