CSS3教程

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

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

CSS3教程  手机阅读
       后台数据管理列表经常会有隔行换色的效果,在过去我们的做法是通过js来计算奇数行和偶数航,如今我们有了CSS3不需要这样来做了,只需要CSS定义一下即可;
  我们虽然学习了nth-chil和nth-last-child的用法,本节课我们来学习它的高级用法。
:nth-child选择器和:nth-last-child选择器
  隔行换色效果其实很简单,同样是根据奇偶数判断,英文里面的奇数是odd,偶数是even,所以我们只需要给这两个选择器传入odd或even就能筛选出奇数行或偶数行了。
  nth-last-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(odd){color:#000; background:#f2f2f2;}/*奇数行*/
  11.                 #list li:nth-child(even){color:#666; background:#dfdfdf;}/*偶数行*/
  12.         </style>
  13.     </head>
  14.    
  15.     <body>
  16.         <ul id="list">
  17.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  18.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  19.             <li>选项03 | 前端开发网(W3Cfuns.com)!</li>
  20.             <li>选项04 | 前端开发网(W3Cfuns.com)!</li>
  21.             <li>选项05 | 前端开发网(W3Cfuns.com)!</li>
  22.             <li>选项06 | 前端开发网(W3Cfuns.com)!</li>
  23.             <li>选项07 | 前端开发网(W3Cfuns.com)!</li>
  24.             <li>选项08 | 前端开发网(W3Cfuns.com)!</li>
  25.             <li>选项09 | 前端开发网(W3Cfuns.com)!</li>
  26.             <li>选项10 | 前端开发网(W3Cfuns.com)!</li>
  27.         </ul>
  28.     </body>
  29. </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/a855.html

点击展开全部
上一篇:CSS3每日一练之选择器-插入文字 下一篇:使用CSS3 @font-face实现个性化字体

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

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

前端开发 css选择器 css
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢