CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3每日一练之选择器-结构性伪类选择器[五]

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. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-结构性伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.                 *{margin:0; padding:0;}
  8.                 #list{font-family:"Microsoft yahei"; font-size:14px;}
  9.                 #list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
  10.                 #list li:nth-child(4n+1){background:#900;}/*从第一行开始算起 每隔4个(包含第四个)使用次样式*/
  11.                 #list li:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个(包含第四个)使用次样式*/
  12.                 #list li:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个(包含第四个)使用次样式*/
  13.                 #list li:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个(包含第四个)使用次样式*/
  14.         </style>
  15.     </head>
  16.    
  17.     <body>
  18.         <ul id="list">
  19.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  20.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  21.             <li>选项03 | 前端开发网(W3Cfuns.com)!</li>
  22.             <li>选项04 | 前端开发网(W3Cfuns.com)!</li>
  23.             <li>选项05 | 前端开发网(W3Cfuns.com)!</li>
  24.             <li>选项06 | 前端开发网(W3Cfuns.com)!</li>
  25.             <li>选项07 | 前端开发网(W3Cfuns.com)!</li>
  26.             <li>选项08 | 前端开发网(W3Cfuns.com)!</li>
  27.             <li>选项09 | 前端开发网(W3Cfuns.com)!</li>
  28.             <li>选项10 | 前端开发网(W3Cfuns.com)!</li>
  29.             <li>选项11 | 前端开发网(W3Cfuns.com)!</li>
  30.             <li>选项12 | 前端开发网(W3Cfuns.com)!</li>
  31.         </ul>
  32.     </body>
  33. </html>

【CSS3每日一练之选择器-结构性伪类选择器[五]】相关文章

1. CSS3每日一练之选择器-结构性伪类选择器[三]

2. CSS3每日一练之选择器-结构性伪类选择器[二]

3. CSS3每日一练之选择器-结构性伪类选择器[一]

4. CSS3每日一练之选择器-结构性伪类选择器[六]

5. CSS3每日一练之选择器-结构性伪类选择器[五]

6. CSS3每日一练之选择器-结构性伪类选择器[四]

7. CSS3每日一练之选择器-状态伪类选择器[五]

8. CSS3每日一练之选择器-状态伪类选择器[四]

9. CSS3每日一练之选择器-状态伪类选择器[三]

10. CSS3每日一练之选择器-状态伪类选择器[二]

本文来源:https://www.51html5.com/a873.html

点击展开全部

﹝CSS3每日一练之选择器-结构性伪类选择器[五]﹞相关内容

「CSS3每日一练之选择器-结构性伪类选择器[五]」相关专题

其它栏目

也许您还喜欢