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

CSS3教程手机阅读

后台数据管理列表经常会有隔行换色的效果，在过去我们的做法是通过js来计算奇数行和偶数航，如今我们有了CSS3不需要这样来做了，只需要CSS定义一下即可;
　　我们虽然学习了nth-chil和nth-last-child的用法，本节课我们来学习它的高级用法。
:nth-child选择器和:nth-last-child选择器
　　隔行换色效果其实很简单，同样是根据奇偶数判断，英文里面的奇数是odd，偶数是even，所以我们只需要给这两个选择器传入odd或even就能筛选出奇数行或偶数行了。
　　nth-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:nth-child(odd){color:#000; background:#f2f2f2;}/*奇数行*/
#list li:nth-child(even){color:#666; background:#dfdfdf;}/*偶数行*/
</style>
</head>
<body>
<ul id="list">
<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>
</ul>
</body>
</html>