前面一篇博客介绍了first-child和last-child两个child伪类选择符,现在再介绍only-child选择符,在W3C的说明中,E:only-child{ sRules }是匹配父元素仅有的一个子元素E。
也就是说,这个选择符会匹配有且只有一个E元素作为子元素的父元素的E元素。有点绕,就举个例子吧。
示例1:
HTML代码:
<h1>只有唯一一个子元素</h1>
<ul>
<li>结构性伪类选择符 E:only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
<li>结构性伪类选择符 E:only-child</li>
<li>结构性伪类选择符 E:only-child</li>
<li>结构性伪类选择符 E:only-child</li>
</ul>
CSS代码:
h1 {
font-size: 16px;
}
li:only-child {
color: #f00;
}
结果:
只有有且只有一个li元素的被匹配到了,变成了红色,三个li元素的则没有变化。
只有一个子元素,且不能有其余任何元素的情况下才能被匹配。例如对HTML代码稍作修改:
示例2:
HTML代码:
<h1>只有唯一一个子元素</h1>
<ul>
<li>结构性伪类选择符 E:only-child</li>
<p>我是一个p</p>
</ul>
<h1>有多个子元素</h1>
<ul>
<li>结构性伪类选择符 E:only-child</li>
<li>结构性伪类选择符 E:only-child</li>
<li>结构性伪类选择符 E:only-child</li>
</ul>
结果:
只是在有且只有一个li元素的位置加了一个P元素,则就匹配不成功了。
所以这个选择符算是一个比较鸡肋的选择符,只有在某些非常特殊的情况下才会使用到。如果用到了后期修改可能也会造成很多的麻烦,在此不建议使用。