备用行>异常>继承背景颜色

Question

我有一个替代行背景颜色的表：

tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #f4f4f4}

该表由两种类型的单元格组成，“。main”和“.sub”。

我希望background-color互相交替“.main”，而所有“.sub”行都获得前一个“.main”的颜色。

如果解决方案都是CSS，那将是很好的，但如果它真的是最好的方式，那么对jquery开放。

有任何想法吗？

<table>
    <tr id='1' class='main'><td></td></tr>
    <tr id='2' class='main'><td></td></tr>
    <tr id='3' class='main'><td></td></tr>
    <tr id='4' class='main'><td></td></tr>
    <tr id='5' class='main'><td></td></tr>
    <tr id='6' class='sub'><td></td></tr>
    <tr id='7' class='main'><td></td></tr>
    <tr id='8' class='main'><td></td></tr>
    <tr id='9' class='sub'><td></td></tr>
    <tr id='10' class='sub'><td></td></tr>
    <tr id='11' class='main'><td></td></tr>
</table>

第1,3,5,8行应为＃f4f4f4

行2,4,7,11应该是#fffff

每个.sub行应该与前面的.main行颜色相同。

（这些表是动态生成的，因此它们的位置会有所不同）

编辑：这是我用jQuery http://jsfiddle.net/xjDZm/首次尝试失败的jsfiddle

Answer 1

我认为这不可能用纯CSS，因为你似乎需要设置.main的奇数行，而不是奇数行和.main，而:nth-child不能这样做（你不能使用(tr.main):nth-child(odd)，更不用说你的要求了）与.sub更复杂）。

所以这是一个jQuery解决方案：

$("tr.main").filter(":even").css("background-color","#CCC");//change to #F4F4F4
$("tr.main").filter(":odd").css("background-color","#FFF");
$("tr.sub").each(function(i,e){
    $(this).css("background-color",$(this).prev().css("background-color"));
});

http://jsfiddle.net/xjDZm/1/

对不起，我不使用jQuery，所以我不确定是否有更好的编码方式。我只是查找API文档以找到有效的方法。