CSS3每日一练之选择器-结构性伪类选择器[六]

看如下代码，我们有3个UL列表，这三个列表中分别包含1个子元素LI、2个子元素LI和多个子元素LI，现在我们要选择只有1个子元素LI的元素，该如何做呢？

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
ul li:nth-child(1):nth-last-child(1){background:#900;}
</style>
</head>
<body>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
<li>选项03 | 前端开发网(W3Cfuns.com)!</li>
<li>选项04 | 前端开发网(W3Cfuns.com)!</li>
<li>选项05 | 前端开发网(W3Cfuns.com)!</li>
<li>选项06 | 前端开发网(W3Cfuns.com)!</li>
<li>选项07 | 前端开发网(W3Cfuns.com)!</li>
<li>选项08 | 前端开发网(W3Cfuns.com)!</li>
<li>选项09 | 前端开发网(W3Cfuns.com)!</li>
<li>选项10 | 前端开发网(W3Cfuns.com)!</li>
<li>选项11 | 前端开发网(W3Cfuns.com)!</li>
<li>选项12 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>

　　我们可以结合之前学习的nth-child和nth-last-child选择器并且将索引都设置为1即可，如下代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
ul li:nth-child(1):nth-last-child(1){background:#900;}
</style>
</head>
<body>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
<li>选项03 | 前端开发网(W3Cfuns.com)!</li>
<li>选项04 | 前端开发网(W3Cfuns.com)!</li>
<li>选项05 | 前端开发网(W3Cfuns.com)!</li>
<li>选项06 | 前端开发网(W3Cfuns.com)!</li>
<li>选项07 | 前端开发网(W3Cfuns.com)!</li>
<li>选项08 | 前端开发网(W3Cfuns.com)!</li>
<li>选项09 | 前端开发网(W3Cfuns.com)!</li>
<li>选项10 | 前端开发网(W3Cfuns.com)!</li>
<li>选项11 | 前端开发网(W3Cfuns.com)!</li>
<li>选项12 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>

其实我们还有更简单的方法，那就是only-child选择器

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
ul li:only-child{background:#900;}
</style>
</head>
<body>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
<li>选项03 | 前端开发网(W3Cfuns.com)!</li>
<li>选项04 | 前端开发网(W3Cfuns.com)!</li>
<li>选项05 | 前端开发网(W3Cfuns.com)!</li>
<li>选项06 | 前端开发网(W3Cfuns.com)!</li>
<li>选项07 | 前端开发网(W3Cfuns.com)!</li>
<li>选项08 | 前端开发网(W3Cfuns.com)!</li>
<li>选项09 | 前端开发网(W3Cfuns.com)!</li>
<li>选项10 | 前端开发网(W3Cfuns.com)!</li>
<li>选项11 | 前端开发网(W3Cfuns.com)!</li>
<li>选项12 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>