原文:纯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. WPF学习（3）布局

    今天我们来说说WPF的布局.我们知道WinForm的布局主要是采用基于坐标的方式,当窗口内容发生变化时,里面的控件不会随之动态调整,这就造成了一个很不好的用户体验.而WPF为了避免这个缺点,采用了基于 ...

  2. 解决LINUX vncserver 启动 could not open default font &#39;fixed&#39;错.

    安装vncserver例如,会发生以下错误:  vncext:      VNC extension running!  vncext:      Listening for VNC connecti ...

  3. 几个cd快速提示

    cd是project师每天都会用到的命令. 今天就来分享几条和cd有关的小技巧 cd 假设你用cd ~来进入当前用户的home文件夹的话,那么能够试试直接敲cd. 相同效果,少敲两下键盘. cd - ...

  4. BZOJ 1901 Zju 2112 Dynamic Rankings 与更改的树董事长

    标题效果:给定一个序列,单点变化,询价区间k大. 思维:假设没有变化.然后划分树就可以解决,但树的分工仍然是一棵树,它不支持的变化. 主席舒变化实际上是在外带fenwick右护套层值段树,但正确的值线 ...

  5. boostrap-非常好用但是容易让人忽略的地方------modal

    使用bootstrap框架好久了,在开发中也用到了或者遇到了很多的问题,所以跟大家分享一下 bootstrap modal 组件的样式 .modal-lg .modal-sm 说明:这个是bootst ...

  6. 64位sql server 如何使用链接服务器连接Access

    原文:64位sql server 如何使用链接服务器连接Access 测试环境 操作系统版本:Windows Server 2008 r2 64位 数据库版本:Sql Server 2005 64位 ...

  7. 2014年辛星全然解读html第八节

    经过前面七节的学习,我感觉大家的HTML的功底也差点儿相同了,并且我特别的删去了某些东西,比方框架,假设回到几年前,那么框架是很流行的,可是如今都到了2014年了,这些东西早就该被遗忘了,因此,我果断 ...

  8. react.js 从零开始（一）

    React 是什么? 网络上的解释很多...我这里把他定义为 通过javascript 的形式组件化 html的框架... React 仅仅是 VIEW 层. React 提供了模板语法以及一些函数钩 ...

  9. Matlab与.NET混合编程解决人脸识别问题

    原文:[原创]Matlab与.NET混合编程解决人脸识别问题 如果这些文章对你有用,有帮助,期待更多开源组件介绍,请不要吝啬手中的鼠标. [原创分享]Matlab.NET混编调用Figure窗体 ht ...

  10. NYOJ353 3D dungeon 【BFS】

    3D dungeon 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 You are trapped in a 3D dungeon and need to find ...