原文:纯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. poj2096--Collecting Bugs(可能性dp第二弹，需求预期)

    Collecting Bugs Time Limit: 10000MS   Memory Limit: 64000K Total Submissions: 2678   Accepted: 1302 ...

  2. apache kafka系列之-监控指标

    apache kafka中国社区QQ群:162272557 1.监控目标 1.当系统可能或处于亚健康状态时及时提醒,预防故障发生 2.报警提示 a.短信方式 b.邮件 2.监控内容 2.1 机器监控 ...

  3. OpenCV2学习笔记（十四）：基于OpenCV卡通图片处理

    得知OpenCV有一段时间.除了研究的各种算法的内容.除了从备用,据导游书籍和资料,尝试结合链接的图像处理算法和日常生活,第一桌面上(随着摄像头)完成了一系列的视频流处理功能.开发平台Qt5.3.2+ ...

  4. [Network]Transport Layer

    1 Principles behind Transport Layer Services 1.1 Multiplexing/Demultiplexing Multiplexing at sender ...

  5. Team Foundation Server 2015使用教程--默认团队权限说明

  6. JAVA —— 数据类型

    引言:java 数据类型可分为两大类:基本数据类型和引用类型,其中基本数据类型又包括整形.浮点型.字符型和布尔型,而引用型变量与基本类型变量不同,它的值是指向内存空间的引用(地址),引用在其他语言中称 ...

  7. android控件 下拉刷新pulltorefresh

    外国人写的下拉刷新控件,我把他下载下来放在网盘,有时候訪问不了github 支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.GridV ...

  8. OAuth和OpenID的区别(转)

    OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用.  OAuth协议为用户资源的授权提 ...

  9. C++使用简单的函数指针

    函数指针: 被调用函数指针必须包括函数的存储器地址,为了正常工作,指针还必须包括其它信息,这一参数列表指针的参数类型和返回类型的函数. 因此,当你声明一个函数指针,数的參数类型和返回类型.以及指针名. ...

  10. linux下面的中断处理软件中断tasklet机制

    參考: <Linux内核设计与实现> http://blog.csdn.net/fontlose/article/details/8279113 http://blog.chinaunix ...