“:only-child”選擇器選擇的是父元素中只有一個(gè)子元素，而且只有唯一的一個(gè)子元素。也就是說(shuō)，匹配的元素的父元素中僅有一個(gè)子元素，而且是一個(gè)唯一的子元素。

示例演示

通過(guò)“:only-child”選擇器，來(lái)控制僅有一個(gè)子元素的背景樣式，為了更好的理解，我們這個(gè)示例通過(guò)對(duì)比的方式來(lái)向大家演示。

HTML代碼：

<div class="post">
  <p>我是一個(gè)段落</p>
  <p>我是一個(gè)段落</p>
</div>
<div class="post">
  <p>我是一個(gè)段落</p>
</div>

CSS代碼：

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

演示結(jié)果：