第一章:第二课 选择器-结构性伪类选择器[三]

后台数据管理列表经常会有隔行换色的效果,在过去我们的做法是通过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>



你可能感兴趣的:(选择器)