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

CSS3教程手机阅读

继续为大家献上CSS3选择器教程，本节同样介绍四种结构性伪类选择器。

:first-child选择器和:last-child选择器
　　之所以将这两个选择器放到一起来讲，是因为它们非常相似，前者表示单独选择某类元素的第一个元素，后者表示单独选择某类元素的最后一个元素。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
#list li:first-child{color:#000; background:#fff;}/*选择#list的第一个子元素li*/
#list li:last-child{color:#666; background:#dfdfdf;}/*选择#list的最后一个子元素li*/
</style>
</head>
<body>
<ul id="list">
<li>选项一 | 前端开发网(W3Cfuns.com)!</li>
<li>选项二 | 前端开发网(W3Cfuns.com)!</li>
<li>选项三 | 前端开发网(W3Cfuns.com)!</li>
<li>选项四 | 前端开发网(W3Cfuns.com)!</li>
<li>选项五 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>

:nth-child选择器和:nth-last-child选择器
　　学会前两个结构性伪类选择器后，我们知道它们可以选择第一个和最后一个子元素，可是又有新的问题了，有的时候我是选择列表中的其中任何一个子元素该怎么办呢？
　　比如我想选择列表中的第二个子元素li，那么只需要li:nth-child(2){}即可，如果想要选择倒数第二个子元素li，那么只需要li:nth-last-child(2){}即可，案例如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
#list li:nth-child(2){color:#000; background:#fff;}/*选择#list的第二个子元素li*/
#list li:nth-last-child(2){color:#666; background:#dfdfdf;}/*选择#list的倒数第二个子元素li*/
</style>
</head>
<body>
<ul id="list">
<li>选项一 | 前端开发网(W3Cfuns.com)!</li>
<li>选项二 | 前端开发网(W3Cfuns.com)!</li>
<li>选项三 | 前端开发网(W3Cfuns.com)!</li>
<li>选项四 | 前端开发网(W3Cfuns.com)!</li>
<li>选项五 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>