《HTML 5与CSS 3 权威指南（第4版·下册）》 —16.3.6　only-child选择器

16.3.6　only-child选择器

采用如下所示的方法并结合运用nth-child选择器与nth-last-child选择器，则可指定当某个父元素中只有一个子元素时才使用的样式。

<子元素>:nth-child(1)：nth-last-child(1){

    // 指定样式

}

接下来，我们看一个示例，该示例中有两个ul列表，一个ul列表里有几个列表项目，另一个ul列表里只有一个列表项目。在样式中指定li列表的背景色为黄色，但是由于采用了结合运用nth-child选择器与nth-last-child选择器并且将序号都设定为1的处理，所以显示出来的页面中只有拥有唯一列表项目的那个ul列表中的列表项目背景色变为黄色。代码如代码清单16-17所示。

代码清单16-17　只对唯一列表项目使用样式示例

这段代码的运行结果如图16-23所示。

另外，可以使用only-child选择器来代替使用“nth-child(1)：nth-last-child(1)”的实现方法。如在上面这个示例中，可以将样式指定中的代码改成如下所示的指定方法。

<style type="text/css">

li:only-child{

    background-color: yellow;

}

</style>

读者可自行将上面示例中的样式指定代码用这段代码进行替代，然后在浏览器中重新查看运行结果。另外，也可使用only-of-type选择器来替代“nth-of-type(1):nth-last-of-type(1)”，通过结合使用nth-of-type选择器与nth-last-of-type选择器来让样式只对唯一子元素起作用。nth-of-type选择器与nth-last-of-type选择器的作用与使用方法在前文已经介绍，此处不再赘述。