CSS中only-child选择器用法详解

标签，那么可以这样写：div :only-child { color: red; }注意事项：:only-child选择器会匹配父元素中唯一的子元素。如果父元素中有多个子元素，:only-child不会生效。该选择器在IE7及更早版本中不被支持。通过这种方式，你可以轻松地为唯一子元素添加特定的样式。》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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

在 CSS 中，:only-child 伪类用于选择某个元素，当它是其父元素中唯一的子元素时生效。也就是说，如果一个父元素只有一个子元素，那么这个子元素就会被 :only-child 匹配。

基本语法

例如，你想给某个容器中唯一的

元素添加特殊样式：

p:only-child {
  color: red;
  font-weight: bold;
}

这段代码的意思是：只有当

是其父元素的唯一子元素时，才应用红色加粗样式。

使用场景示例

假设有以下 HTML 结构：

<div>
  <p>我是唯一的段落</p>
</div>

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

<div>
  <span>其他元素</span>
</div>

上面第一个

p:only-child {
  background: yellow;
}