表格奇偶行变色

表格的行间隔变色

有如下种方式

方式一:使用纯css
table.dictionaryList tr:nth-child(2n+1){	background-color:#c0e0f7;}table.dictionaryList tr:nth-child(2n+0){	background-color:#defcfe;}

说明 :n从零开始:0,1,2,3....

方式二:使用javascript脚本实现
$(function(){		$('div.queryResultDiv table.productList tr:odd').addClass('odd');	 	$('div.queryResultDiv table.productList tr:even').filter(':gt(0)').addClass('even'); 	})
 
或者
或者一行代码
$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})

说明:odd和even均是css类.

方式三:使用javascript脚本
function altRows(id){if(document.getElementsByTagName){	var table = document.getElementById(id);	var rows = table.getElementsByTagName("tr");	for(i = 0; i < rows.length; i++){	if(i % 2 == 0){	rows[i].className = "evenrowcolor";	}else{	rows[i].className = "oddrowcolor";	}	}}}

说明:参数id是表格的id属性值.

推荐方式一,使用纯css


CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样。这样的兼容性很好。但是最近在做手机网站的时候,由于手机网站对浏览器兼容要求相对较低,手机浏览器大部分都支持css3,这就大大提高了开发效率。可以随意使用CSS3 :nth-child()伪类选择器。

nth-child()浏览器支持

IE9及以上版本,火狐,谷歌,Safari ,Opera都支持!

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 n个子元素,不论元素的类型

n 可以是数字、关键词或公式。

例如:

p:nth-child(2)
{
background:#ff0000;
}
<body>
<h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p>
</body>

上面这段代码请问那个段落颜色是红色的?

答案是“haorooms第一个段落。”颜色变成了红色!

解释::nth-child(n) 选择器匹配属于其父元素的第 n个子元素,不论元素的类型。p:nth-child(2),P标签的父元素是body,body的第二个子元素是“haorooms第一个段落。”所以haorooms第一个段落颜色变为了红色!!!

注意

很多朋友经常把:nth-child() 和:nth-of-type()混淆。

CSS3 :nth-of-type() 选择器的意思是“规定属于其父元素的第二个 p 元素”

看下面的例子:

p:nth-of-type(2)
{
background:#ff0000;
}
<body>
<h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p>
</body>

代码一样,我的样式仅仅是把 p:nth-child(2)改成了 p:nth-of-type(2),现在就是“haorooms第二个段落。”颜色变成了红色。

奇偶数匹配

现在开始说说我开通说的table的tr偶数行变色的问题了。

因为table的子元素一般是tr,不会有别的,所以可以用

tr:nth-child(odd) 与 tr:nth-child(even)

当然也可以用

tr:nth-of-type(odd) tr:nth-of-type(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

倍数写法

:nth-child(an) 【:nth-of-type(an)同理,不解释】

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

例子:

li:nth-child(3n){background:orange;}/把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色

延伸

:nth-child(2n+1), :nth-child(2n-3) , :nth-child(4n+3) ,还可以 :nth-child(-an+b)也就是反向匹配。

总之,你可以用了:nth-child伪类,可以对多个标签有规律的进行不同的显示,显示出CSS3的强大。css3需要多用,熟能生巧,在书写的时候,经常会把一些css3的属性忘掉,你可以多手写几遍。












  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值