原文:纯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. 大约Java有点感悟---开发商根本上感悟学习

    这些年来一直从事大C.C++,有些局部底.一直想知道更多关于顶级什么. 所以,在工作之余.阅读更多Java哪些方面,还使用了一些建筑结构的一些简单的程序,在这里我想简单谈谈自己的一点感悟. 1.Jav ...

  2. 如何获得SQL Server索引使用情况

    原文:如何获得SQL Server索引使用情况 原文出自: http://www.mssqltips.com/sqlservertip/1239/how-to-get-index-usage-info ...

  3. 走向DBA[MSSQL篇] 面试官最喜欢的问题 ----索引+C#面试题客串

    原文:走向DBA[MSSQL篇] 面试官最喜欢的问题 ----索引+C#面试题客串 对大量数据进行查询时,可以应用到索引技术.索引是一种特殊类型的数据库对象,它保存着数据表中一列或者多列的排序结果,有 ...

  4. android 内存泄漏分析技巧

    java虚拟机执行一般都有一个内存界限,超过这个界限,就会报outofmemory.这个时候一般都是存在内存泄漏.解决内存泄漏问题,窃以为分为两个步骤:分析应用程序是否真的有内存泄漏,找到内存泄漏的地 ...

  5. InstallShield自定义安装界面

    原文:InstallShield自定义安装界面 版权声明: 可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息. 前言: 对于一些InstallShield用户或企业,对于安装包界面除了 ...

  6. 解析grant connect, resource to user语句

    今天同事问了一个问题:"创建用户分配的权限是:grant connect,resource to user;,可是建立view的时候失败了,错误是权限不够,后来我给这个用户分配了创建view ...

  7. HTC T328W刷机包 仿三星S5 UI美化 精简 S5落下

    ROM介绍 1.三星移植TouchWiz接口; 2.三星增加S4壁纸和图标美化; 3.正确ROM呈流线型; 4.正确ROM优化; 5.完成ROOT权限; 6.短信支持来信息亮屏功能(在短信设置里设置) ...

  8. 通过HttpClient来调用Web Api接口，实体参数的传递

    下面定义一个复杂类型对象 public class User_Info { public int Id { get; set; } public string Name { get; set; } p ...

  9. 采用jquery的imgAreaSelect样品图像裁剪示范插件实现

    将用户上传的图片进行裁剪再保存是如今web2.0应用中经常处理的工作,如今借助jquery的imgareaselect插件再配合PHP的GD库就能够轻松的实现这个在曾经来说很棘手的功能. 我们来看看它 ...

  10. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2 ...