jQuery实现隔行变色

我们都知道在CSS中，利用nth-child选择器可以实现隔行变色，那么同样在jQuery中我们也可以实现隔行变色。

html代码：

<div class="contain">
	<table border="0" width="100%" cellspacing="0">
		<tr class="t-head">
			<th width="50%">商品</th>
			<th width="10%">单价</th>
			<th width="10%">数量</th>
			<th>操作</th>
		</tr>
		<tr>
		　　<td>
			<img src="images/f1.jpg" width="50" height="50"/>
			<a href="">毛衣</a>
		　　</td>
		　　<td>180.0</td>
		　　<td>3</td>
		　　<td><a href="javascript:void(0);" id="del">删除</a></td>
		</tr>
		<tr>
			<td>
				<img src="images/f2.jpg" width="50" height="50"/>
				<a href="">连衣裙</a>
			</td>
			<td>765.0</td>
			<td>4</td>
			<td><a href="javascript:void(0);" id="del">删除</a></td>
		</tr>
		<tr>
			<td>
				<img src="images/f3.jpg" width="50" height="50"/>
				<a href="">红色小外套</a>
			</td>
			<td>456.0</td>
			<td>2</td>
			<td><a href="javascript:void(0);" id="del">删除</a></td>
		</tr>
		<tr>
		　　<td>
			<img src="images/f4.jpg" width="50" height="50"/>
			<a href="">套头衫</a>
		　　</td>
		　　<td>140.0</td>
		　　<td>1</td>
	　　　　　　　<td><a href="javascript:void(0);" id="del">删除</a></td>
		</tr>
	</table>
</div>

　　实现思路：变色无非就是给table中的tr添加背景颜色。且除了第一行之外，其他的都变色。

　　那我们该怎么设置呢？我们知道CSS有个性质，就是相同样式，前面的样式会覆盖后面的样式，那么我们是不是先可以设置除了第一行之外其他行的样式都是一样的，然后我们在单独设置偶数行的样式。

jQuery代码：

$(function(){
    $(".contain table .t-head~tr").css("background","#f7e195");
    $(".contain table tr:nth-child(even)").css("background","#eff7d1");
})