爲什麼我的備用行背景顏色不適用於我的表格？

Question

我使用了下面的CSS和HTML：

table.grid tbody tr:nth-child(odd) { 
    background: #888; 
} 


<table class="form grid"> 
    <tbody> 
     <tr> 
     <td>xx</td> 
     </tr> 
     <tr> 
     <td>xx</td> 
     </tr> 
     <tr> 
     <td>xx</td> 
     </tr> 
     <tr> 
     <td>xx</td> 
     </tr> 
    </tbody> 
</table> 

表顯示了罰款，但沒有不同的背景顏色底紋的行。我錯過了什麼嗎？

Answer 1

嘗試將您的CSS選擇器調整爲table.grid tbody tr:nth-child(odd) td {。

如果您的文檔中的其他CSS影響td元素的background屬性，同時還允許您執行列專用樣式（例如，用於排序），這可能會有所幫助。我覺得這適用於將background屬性應用於tr元素。

Here's a Fiddle表明這應該可以與你的CSS一起工作，除非你的CSS中有其他東西影響它。

Answer 2

此問題已被回答多次。已知存在與CSS3和IE有關的已知破壞第n個子選擇器的兼容性問題。您可能需要使用JQuery來代替它。下面是一些信息可以幫助

Alternate table row color using CSS?