在css中如何用:only-child判断唯一子元素-css教程-PHP中文网

在css中如何用:only-child判断唯一子元素

P粉602998670

发布： 2025-10-07 23:41:01

原创

951人浏览过

:only-child选择父元素中唯一的子元素，如p:only-child{color:red}仅当p是其父元素的唯一子元素时生效，与:only-of-type不同的是它不区分类型且要求无其他兄弟元素。

在css中如何用:only-child判断唯一子元素

在 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 不会选中任何东西。