CSS - 伪类 :only-of-type

CSS 伪类选择器 :only-of-type 匹配或表示在同一父容器中没有相同类型的同级元素。

此伪类选择的元素必须具有父元素。

语法


:only-of-type {
	 	/* ... */	
}

CSS :only-of-type 示例

下面是一个伪类 :only-of-type 的示例，应用于 <p> 和 <h2> 标签，位于 <div> 父元素下：


<html>
<head>
<style>
	 	.field {
	 	 	 margin: 1px;
	 	 	 padding: 1px;
	 	}

	 	p:only-of-type {
	 	 	 color: darkblue;
	 	 	 background-color: lightpink;
	 	 	 padding: 5px;
	 	}

	 	h2:only-of-type {
	 	 	 text-decoration-line: underline;
	 	 	 color: green;
	 	}

	 	div {
	 	 	 border: 2px solid black;
	 	 	 width: 500px;
	 	}
</style>
</head>
<body>
	 	<div class="field">
	 	 	 <h2>Heading 2 - only type</h2>
	 	 	 <p>Paragraph tag - only type</p>
	 	</div>
	 	
	 	<div class="field">
	 	 	 <h2>Heading 2 - only type</h2>
	 	 	 <p>Paragraph tag 1 - we are two</p>
	 	 	 <p>Paragraph tag 2 - we are two</p>
	 	</div>
</body>
</html>

在此示例中，CSS 规则仅适用于在 <div> 父容器中找到的唯一 <p> 和 <h2> 类型元素。第二个 <div>只有一个 <h2> 类型元素，而是两个 <p> 元素，因此样式仅应用于 <h2> 元素，而不应用于 <p> 元素。

打印本页