CSS Zebra剥离不能正常工作

Question

我想让Zebra剥离我的表，但它不能正常工作。

<style> 
tr.campaign:nth-of-type(even) 
{ 
    background:#e0e0e0; 
} 

tr.campaign:nth-of-type(odd) 
{ 
    background:#f1f1f1; 
} 

</style> 
<table> 
<tr class="campaign"> 
    <td rowspan="2">hey</td> 
    <td>row 1</td> 
</tr> 
<tr> 
    <td>row 2</td> 
</tr> 

<tr class="campaign"> 
    <td rowspan="2">hey</td> 
    <td>row 3</td> 
</tr> 
<tr> 
    <td>row 4</td> 
</tr> 

</table> 

我正在尝试上面的代码。实际上，运动类别的行应该在斑马条上着色，但它也考虑其他行来着色。因此，由于第二个广告系列类别上方的2行，广告系列类别的第二行的颜色与广告系列类别的第1行相同。

问候。

Answer 1

有没有办法做到这一点在选择器级别3 :nth-of-type将始终采取所有tr兄弟姐妹进去，不仅那些匹配：

的:nth-of-type(an+b)伪类符号表示具有an+b-1元素在文档树中具有相同扩展元素名称的兄弟，对于任何零或正整数值n，并且具有父元素。

在选择器电平4（这是目前未在任何浏览器实现）会有:nth-match：

:nth-match(an+b of selector-list)伪类表示法表示具有父，并且具有匹配该an+b-1兄弟姐妹的元件在文档树中给出选择器列表之前，对于任何零或正整数值n。

资源：

• W3C：选择3级：:nth-of-type
• W3C：选择4级：:nth-match