霍者博客

CSS3选择器-结构性伪类选择器(三):nth-child :nth-last-child的高级用法 隔行换色

我们在实际的案例中,经常会有隔行换色的效果,在过去我们的做法是通过js来计算奇数行和偶数航,如今我们有了CSS3不需要这样来做了,只需要CSS定义一下即可;

上节《CSS3选择器-结构性伪类选择器(二)》,我们学习了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选择器-结构性伪类选择器(三):nth-child :nth-last-child的高级用法 隔行换色</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                #list{font-family:"Microsoft yahei"; font-size:14px;}
                #list li{width:500px; 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 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项02 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项03 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项04 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项05 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项06 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项07 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项08 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项09 | 霍者网页设计博客(www.huozheweb.com)!</li>
            <li>选项10 | 霍者网页设计博客(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>


原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/448.html,标题:CSS3选择器-结构性伪类选择器(三):nth-child :nth-last-child的高级用法 隔行换色

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。