English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS伪类:only-child는 형제 요소가 없는 요소를 매칭합니다.等效한 선택자는 :first도 됩니다.-child:last-child 또는 :nth-child(1:nth-last-child(1), 물론, 전자의 가중치는 약간 낮습니다.
부모 요소의 유일한 자식 요소에 속한 p 요소를 매칭합니다:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 가이드(oldtoolbag.com)</title>
<style>
div p:only-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>이 문단은 그 부모 요소의 유일한 자식 요소입니다</p>
</div>
<div>
<p>이 문단은 그 부모 요소의 첫 번째 자식 요소입니다</p>
<p>이 문단은 그 부모 요소의 두 번째 자식 요소입니다</p>
</div>
</body>
</html>테스트해 보세요 ‹/›:only-child
:only-child 선택자는 부모 요소의 유일한 자식 요소에 속한 요소를 매칭합니다.
표의 숫자는 해당 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.
| 선택자 | |||||
|---|---|---|---|---|---|
| :only-child | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |