CSS斑馬條紋特定表tr：nth-​​child（偶數）

Question

我想用斑馬條紋只選擇表格。我不想爲此使用jQuery。

tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;} 

當我把它放在一個css文件中時，它會影響所有調用相同樣式表的頁面上的所有表格。我想要做的是有選擇地將其應用於特定的表格。

我試過這個，但它不起作用。

// in stylesheet 
.zebra_stripe{ 
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}  
} 

// in html 
<table class="zebra_even"> 
<colgroup> 
    <col class="width_10em" /> 
    <col class="width_15em" /> 
</colgroup> 
<tr> 
    <td>Odd row nice and clear.</td> 
    <td>Some Stuff</td> 
</tr> 
<tr> 
    <td>Even row nice and clear but it should be shaded.</td> 
    <td>Some Stuff</td> 
</tr> 
</table> 

這：

<table> 
    <colgroup> 
     <col class="width_10em" /> 
     <col class="width_15em" /> 
    </colgroup> 
    <tbody class="zebra_even"> 

樣式表的工作，因爲它是正確格式的HTML的其他元素。有人可以幫我解答這個問題嗎？

Answer 1

你的代碼如下所示：

.zebra_stripe{ 
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}  
} 

這是錯誤的（顯然，或者你不需要問這個問題），但並不遙遠。

解決方案是，您只需將.zebra_stripe包含在現有的CSS選擇器中。 CSS不支持多個大括號的選擇器層，就像你寫的那樣。 （還有其他的方言一樣都不能少和薩斯那些支持這種語法的，如果你真的需要它，但在你的情況下，解決方案不需要任何聰明的語法）

.zebra_stripe tbody tr:nth-child(even) td, .zebra_stripe tbody tr.even td { 
    background:#e5ecf9; 
} 

這裏假設你有一個表與類zebra_stripe：

<table class='zebra_stripe'> 
    .... 
</table> 

沒有類的表不會被分散。

順便說一句，我已經把你的選擇器留在了那裏，但你不應該同時需要它們。 nth-child()選擇器應該自己動手，沒有tr.even替代方案。在不支持nth-child()（即IE的舊版本）的瀏覽器中需要tr.even，但在這種情況下，如果您需要支持它們，您可以使用even類，並且不需要使用nth-child()。

Answer 2

你的代碼可以使用CSS解析器引擎的工作一樣都不能少

// in stylesheet 
.zebra_stripe{ 
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}  
} 

常用的CSS應該看起來像

.zebra_stripe tbody tr:nth-child(even) td, 
.zebra_stripe tbody tr.even td {background:#e5ecf9;} 

Answer 3

.zebra-stripe tbody tr:nth-child(even) td, .zebra-stripe tbody tr.even td {background:#e5ecf9;}