:only-child
**:only-child
** CSS 伪类 表示没有兄弟节点的元素。 这与 :first-child:last-child
或 :nth-child(1):nth-last-child(1)
相同,但具有更低的特异性。
试一试
语法
css
:only-child {
/* ... */
}
示例
基本示例
HTML
html
<div>
<div>I am an only child.</div>
</div>
<div>
<div>I am the 1st sibling.</div>
<div>I am the 2nd sibling.</div>
<div>
I am the 3rd sibling,
<div>but this is an only child.</div>
</div>
</div>
CSS
css
div:only-child {
color: red;
}
div {
display: inline-block;
margin: 6px;
outline: 1px solid;
}
结果
列表示例
HTML
html
<ol>
<li>
First
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>
Second
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
CSS
css
li li {
list-style-type: disc;
}
li:only-child {
color: red;
list-style-type: square;
}
结果
规范
规范 |
---|
选择器级别 4 # only-child-pseudo |
浏览器兼容性
BCD 表格仅在浏览器中加载