:only-child
CSS伪类:only-child
匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child
或者:nth-child(1):nth-last-child(1)
,当然,前者的权重会低一点.
/* Selects each <p>, but only if it is the */
/* only child of its parent */
p:only-child {
background-color: lime;
}
Note: 在起初定义, 被选择的元素必须拥有一个父级元素. 从 Selectors Level 4 开始, 这不再是必须的了.
语法
:only-child
示例
基础示例
HTML
<main>
<div>
<i>I am a lonely only child.</i>
</div>
<div>
<i>I have siblings.</i><br>
<b>So do I!</b><br>
<span>I also have siblings, <span>but this is an only child.</span></span>
</div>
</main>
CSS
main :only-child {
color: red;
}
结果
一个列表示例
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
li li {
list-style-type: disc;
}
li:only-child {
color: red;
list-style-type: square;
}
结果
规范
Specification | Status | Comment |
---|---|---|
Selectors Level 4 :only-child |
Working Draft | Matching elements are not required to have a parent. |
Selectors Level 3 :only-child |
Recommendation | Initial definition. |
浏览器兼容性
BCD tables only load in the browser