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