<style>
#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>
 <div>
<ul id="list1">
<li>1111111</li>
<li>222222222222</li>
<li>333333333</li>
<li>44444444</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
<hr />
<ul id="list2">
<li>1111111</li>
<li>222222222222CSS3</li>
<li>333333333</li>
<li>44444444</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
</div>

css3隔行变换色实现示例的更多相关文章

  1. 纯CSS隔行换色

    原文:纯CSS隔行换色 <head> <meta http-equiv="Content-Type" content="text/html; chars ...

  2. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  3. php29号小结(隔行换色······)

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

  4. table隔行换色

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

  5. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

  6. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

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

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

  8. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

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

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

随机推荐

  1. :last-child

    匹配最后一个子元素 :last只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素 示例 描述: 在每个 ul 中查找最后一个 li HTML 代码: <ul> <li&g ...

  2. usermod

    环境: [root@vm-xiluhua][/]# cat /etc/redhat-release CentOS Linux release (Core) usermod usage:(本人使用的版本 ...

  3. 精彩的javascript对象和数组混合相加

    最近遇到一个让人困解的一个问题:一个简单的js加法运算表达式: +[]; //这里加上一个空数组得到什么???答案:'1'; 为什么答案是1,一开始我也很困惑:后来我读了一篇文章才知道:在javasc ...

  4. html与jsp

    1. 什么是 HTML 语言? HTML文件有什么特征? 答:HTML是超文本标记语言(Hypertext Mark-up Language)的缩写,主要用来创建与系统平台无关的网页文档.它是目前网络 ...

  5. YTU 3023: 树的遍历

    原文链接:https://www.dreamwings.cn/ytu3023/2617.html 3023: 树的遍历 时间限制: 1 Sec  内存限制: 128 MB 提交: 3  解决: 2 题 ...

  6. Windows下WebStorm使用SVN

    安装了phpstorm之后,想配置svn,结果在file->settings->Version Contorl->subversion->use conmand line cl ...

  7. Linux常见命令汇总

    1.rz sz上传下载 若未安装使用:yum install lrzsz 安装 上传: rz 覆盖上传: rz -y 下载: sz bbb.jpg

  8. OGNL_一点

    ognl此表达式语言,是一门什么样的语言呢?下面然我为大家简单的讲解一点小小的关于它的内容吧! 然我来简单得解释说:OGNL(Object-Graph Navigation Language),可以方 ...

  9. 2015年江西理工大学C语言程序设计竞赛(高级组)

    A 解法:DP+二分 dp[i]=max(dp[i],dp[j]+p[i].v)(i>j) dp[i]表示建立i点之后能够获得的最大值 int n,M; struct node { int l, ...

  10. 不用安装Oracle_Client就能使用PLSQL_Developer

    1. 下载oracle的客户端程序包(30M)       只需要在Oracle官方网站下载一个叫Instant Client Package的软件就可以了,这个软件不需要安装,只要解压就可以用了,很 ...