child伪类选择符入门（2）

        前面一篇博客介绍了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元素，则就匹配不成功了。

        所以这个选择符算是一个比较鸡肋的选择符，只有在某些非常特殊的情况下才会使用到。如果用到了后期修改可能也会造成很多的麻烦，在此不建议使用。