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选择器,只不过咱们这次给它的参数是表达式,咱们先来看案例,看过之后你就明白了:
从第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>
【CSS3每日一练之选择器-结构性伪类选择器[五]】相关文章
本文来源:https://www.51html5.com/a873.html
﹝CSS3每日一练之选择器-结构性伪类选择器[五]﹞相关内容
- CSS3每日一练之选择器-状态伪类选择器[一]
- CSS3每日一练之选择器-兄弟元素选择器
- CSS3每日一练之选择器-属性选择器
- CSS3每日一练之选择器-插入文字
- HTML5每日一练之progress标签的应用
- HTML5每日一练之视频标签的应用
- HTML5每日一练之OL列表的改良
- HTML5每日一练之datalist标签自动补全的使用
- HTML5每日一练之FileList文件列表对象的应用
- HTML5每日一练之figure新标签的应用