CSS 伪类选择器 :only-child 匹配或表示一个元素，该元素是其父元素的唯一子元素，换句话说，是没有任何同级元素的元素。此伪类的行为方式与 :first-child 、:last-child 或 :nth-child（1） 、 :nth-last-child（1） 相同，但特异性较低。
此伪类选择的元素必须具有父元素。
语法
:only-child {
/* ... */
}
:only-child（） 示例
下面是一个 :only-child 伪类的示例，应用于 <p> 标签的 <div> 父元素下。
在此示例中，CSS 规则仅适用于在第一个 <div> 元素中找到的第一个 <p> 元素，因为这是唯一一个只有一个子元素的父元素。
<html>
<head>
<style>
.field {
margin: 1px;
padding: 1px;
}
p:only-child {
color: darkblue;
background-color: lightpink;
}
div {
border: 2px solid black;
width: 500px;
}
</style>
</head>
<body>
<div class="field">
<p>Only child of this div</p>
</div>
<div class="field">
<p>First Child</p>
<p>Second Child</p>
</div>
<div class="field">
<h1>Heading - first child </h1>
<p>Only p child, but second child</p>
</div>
</body>
</html>
下面是一个 :only-child 伪类的示例，应用于 <li> 标签的 <ol> 和 <ul> 父元素下。
在此示例中，CSS 规则将应用于在 <ol> 和 <ul> 元素中找到的唯一 <li> 元素。
<html>
<head>
<style>
.field {
margin: 1px;
padding: 1px;
}
li:only-child {
color: darkblue;
background-color: lightpink;
padding: 5px;
}
div {
border: 2px solid black;
width: 500px;
}
</style>
</head>
<body>
<div class="field">
<ol>Ordered list:
<li>Only one item</li>
</ol>
</div>
<div class="field">
<ol>
<li>One item</li>
<li>Two item</li>
</ol>
</div>
<div class="field">
<ul>Unordered list:
<li>First Item</li>
</ul>
</div>
</body>
</html>
