原文:纯CSS隔行换色 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css3隔行变换色---www.jbxue.com</title>

<style type="text/css">

#list1 li:nth-of-type(odd){ background:#00ccff;}奇数行

#list1 li:nth-of-type(even){ background:#ffcc00;}偶数行

#list2 li:nth-child(4n+1){ background:#00ccff;}从第一行开始算起 每隔4个（包含第四个）使用此样式

#list00000 li:nth-child(4n+2){background:#090;}从第二行开始算起 每隔4个（包含第四个）使用次样式

#list00000 li:nth-child(4n+3){background:#009;}从第三行开始算起 每隔4个（包含第四个）使用次样式

#list00000 li:nth-child(4n+4){background:#990;}从第四行开始算起 每隔4个（包含第四个）使用次样式

</style>

</head>

<body>

<div>

<ul id="list1">

<li>1111111前端路上是脚本学堂的多人博客</li>

<li>222222222222CSS3隔行换色测试</li>

<li>333333333提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。</li>

<li>44444444前端路上博客的灵魂：学习、发现、分享、交流</li>

<li>55555555555555</li>

<li>66666666666666666</li>

</ul>

<hr />

<ul id="list2">

<li>1111111前端路上是脚本学堂的多人博客</li>

<li>222222222222CSS3隔行换色测试</li>

<li>333333333提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。</li>

<li>44444444前端路上博客的灵魂：学习、发现、分享、交流</li>

<li>55555555555555</li>

<li>66666666666666666</li>

</ul>

</div>

</body>

纯CSS隔行换色的更多相关文章

  1. css隔行换色

    .tab1 tr:nth-of-type(odd){ background:#eeeeee;} .tab1 tr:nth-of-type(even){ background:#f8f8f8;} .ta ...

  2. php29号小结（隔行换色······）

    1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...

  3. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  4. table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...

  5. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  6. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  9. jQuery的基本过滤器与jQuery实现隔行换色实例

    没加过滤器之前: 加过滤器之后: 总的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

随机推荐

  1. wxWidgets+wxSmith版电子词典

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目3-OOP版电子词典](本程序须要的相关 ...

  2. apk反编译工具-apktool

    apk很easy被反编译,关于这篇文章apktool反编译工具. (一)优势反编译 1.能学习别人优秀代码 看看优秀apk他们的string.color命名规则,看看布局排版等都能学习到东西. 2.进 ...

  3. 【MySQL案件】ERROR 1418

    1.1.1. ERROR 1418 [环境的叙述性说明] mysql5.0.67 [问题叙述性说明] 当它来到创建存储过程ERROR 1418一个错误. # 创建函数SQL声明 CREATE FUNC ...

  4. C#中实现并发

    C#中实现并发的几种方法的性能测试 0x00 起因 去年写的一个程序因为需要在局域网发送消息支持一些命令和简单数据的传输,所以写了一个C/S的通信模块.当时的做法很简单,服务端等待链接,有用户接入后开 ...

  5. 王立平--android特权

    //同意应用程序访问和更改checkin数据库"properties"数据表 android.permission.ACCESS_CHECKIN_PROPERTIES //同意应用 ...

  6. NSIS API 函数常用备份

    原文:NSIS API 函数常用备份 关闭程序: System::Call `user32::AnimateWindow(i$HWNDPARENT,i200,i${AW_BLEND}|${AW_HID ...

  7. 记录我第一次在Android开发图像处理算法的经历

    大概是四月底的时候.有人加我QQ问我是否做能做一些基于图像皮肤检測的算法, 主要是实现对皮肤六项指标: 1.      水分 2.      有份 3.      痤疮与痘痘 4.      色斑与肤 ...

  8. Php面向对象 – 继承和重写

    Php面向对象 – 继承和重写 承受: php于,通过类.使用特殊的经营宗旨. 通过定义类,采用extends来表示当前的类对象继承该类的对象. 样例: class C { public  $p_c  ...

  9. Android简单的聊天室开发（client与server沟通）

    请尊重他人的劳动成果.转载请注明出处:Android开发之简单的聊天室(client与server进行通信) 1. 预备知识:Tcp/IP协议与Socket TCP/IP 是Transmission ...

  10. linux 3.4.103 内核移植到 S3C6410 开发板 移植失败 (问题总结，日本再战！)

    linux 3.4.103 内核移植到 S3C6410 开发板 这个星期差点儿就搭在这里面了,一開始感觉非常不值得,移植这样的浪费时间的事情.想立刻搞定,然后安安静静看书 & coding. ...