原文:纯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. 【cocos2d-x-3.1.1列2】cocos2d-x3.1.1 安卓移植过程

    Evernote的链接: http://app.yinxiang.com/l/AAXeIjFsjjFAC68i6hUQkiwFFZg3Maz-AkA/ cocos2d-x 3.1.1  win移植到a ...

  2. tornado的GET POST方法样品展示

    举例说明get和post该方法的用途: 一.演示样例用的GET方法: import tornado.ioloop import tornado.web class MainHandler(tornad ...

  3. HDU 1026 Ignatius and the Princess I 迷宫范围内的搜索剪枝问题

    这个问题是一个典型的类型的问题迷宫广泛的搜索. 在网上看到了很多解决方案. 没什么解决问题的分析报告,不指出其中的关键点.代码更像是一大抄.一些分析师也有很大的文章分析.只是不要全部命中关键,什么是广 ...

  4. Net 项目构建基于Jenkins + Github + Mono 的持续集成环境

    Net 项目构建基于Jenkins + Github + Mono 的持续集成环境 阅读目录 1 安装 2 配置 3 测试 在Redhat enterprise 6.5 的服务器上,为在gutub 上 ...

  5. DDD事件总线

    DDD事件总线 基本思路: (1)       在事件总线内部维护着一个事件与事件处理程序相映射的字典. (2)       利用反射,事件总线会将实现了IEventHandler的处理程序与相应事件 ...

  6. iOS中通讯录电话号码空格问题

    今天在读取通讯录的时候,读取到的手机号码格式为* (***) ***-****的,乍看下,数字中间有空格."-".(.)的非数字字符. 然后我就打算替换这些非数字字符,结果替换完, ...

  7. IQ调制、整形滤波器与星座映射

    http://www.cnblogs.com/touchblue/archive/2013/01/15/2861952.html 现代通信中.IQ调制基本上属于是标准配置,由于利用IQ调制能够做出全部 ...

  8. cocos2d-x3.0 解释具体的新的物理引擎setCategoryBitmask()、setContactTestBitmask()、setCollisionBitmask()

    转载请注明出处:游戏开发实验室http://blog.csdn.net/u010019717/article/details/32942641 我在编写游戏的时候遇到了这个问题.  物理引擎其它的内容 ...

  9. HDU-4628 Pieces 如压力DP

    鉴于他的字符串,每一个都能够删除回文子串.子可以是不连续,因此,像更好的模拟压力.求删除整个字符串需要的步骤的最小数量. 最大长度为16,因此不能逐行枚举状态.首先预处理出来全部的的回文子串,然后从第 ...

  10. Testin一日游实验室发布的行级APP质量报告:在那里拍携程双赢

    Testin实验室公布国庆出行旅途类APP质量报告:携程力压去哪儿夺冠 2014/09/28 · Testin · 实验室报告 一年一度的十一黄金周即将临近,旅游软件成为每外出行人手机必装软件.为此全 ...