霍者博客

CSS3选择器-结构性伪类选择器(五)

通过前几章的学习我们已经知道,使用nth-child选择器、nth-last-child选择器、nth-of-type和nth-last-of-type选择器可以对父元素中指定索引的子元素、奇偶子元素等进行单独样式的定义,但是还有一种情况,我们使用前面所讲的内容是无法实现的,如下图

要求:

从第1行开始算起 每隔4个(包含第4个)使用红色
从第2行开始算起 每隔4个(包含第4个)使用绿色
从第3行开始算起 每隔4个(包含第4个)使用蓝色
从第4行开始算起 每隔4个(包含第4个)使用黄色

循环使用样式:

我们同样还是使用nth-child选择器,只不过咱们这次给它的参数是表达式,咱们先来看案例,看过之后你就明白了:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(五)</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                #list{font-family:"Microsoft yahei"; font-size:14px;}
                #list li{width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                #list li:nth-child(4n+1){background:#900;}/*从第一行开始算起 每隔4个(包含第四个)使用次样式*/
                #list li:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个(包含第四个)使用次样式*/
                #list li:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个(包含第四个)使用次样式*/
                #list li:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个(包含第四个)使用次样式*/
        </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>
            <li>选项11 | 霍者网页设计博客博客(www.huozheweb.com)!</li>
            <li>选项12 | 霍者网页设计博客博客(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>


原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/465.html,标题:CSS3选择器-结构性伪类选择器(五)

【我来说两句】
分享到:

评论 0

发表评论:

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