CSS - 伪类 :only-child

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>

打印本页

CSS - 伪类 :only-child

语法

:only-child（） 示例

:only-child（）示例