当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 9:03:01

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

循环样式.png

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

循环使用样式：
　　我们同样还是使用nth-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(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 | 前端开发网(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>
            <li>选项11 | 前端开发网(W3Cfuns.com)!</li>
            <li>选项12 | 前端开发网(W3Cfuns.com)!</li>
        </ul>
    </body>
</html>