19.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列表中的列表项目背景色变为黄色。代码如代码清单19-17所示。
代码清单19-17 只对唯一列表项目使用样式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>只对唯一列表项目使用样式示例</title>
<style type="text/css">
li:nth-child（1）：nth-last-child（1）{
background-color: yellow;
}
</style>
</head>
<body>
<h2>ul列表A</h2>
<ul>
<li>列表项目A01</li>
</ul>
<h2>ul列表B</h2>
<ul>
<li>列表项目B01</li>
<li>列表项目B02</li>
<li>列表项目B03</li>
</ul>
</body>
</html>
这段代码的运行结果如图19-23所示。
图19-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选择器的作用与使用方法在前文已经介绍，此处不再赘述。
相关HTML 5与CSS 3权威指南：only-child选择器