修改表格單元格

Question

這個CSS規則第n個孩子正常工作：

.TabSymbols tr:nth-child(even) { background-color: #f2f2f2; } 

每隔一行有一個背景顏色。

現在想象一個有四列的表格。在第三和第四列的每個單元格擁有一流的「日期」 ...

<td class="Date"> 

以下樣式應用於.Date：

.Date { background: #666; color: #fff; } 

但這裏的漁獲：我不知道希望每個具有Date類的單元格都具有背景顏色。相反，我希望樣式符合上面列出的第一條規則。因此，每個偶數行中的前兩個單元格將具有背景顏色＃f2f2f2，而最後兩個單元格將具有背景＃666。奇數行將是純白色，或者表格的背景顏色。

我嘗試了這些規則沒有成功：

.TabSymbols tr:nth-child(even) td.Date { background-color: #666; } 
.TabSymbols tr:nth-child(even).Date { background-color: #666; } 

我也採取了線索，從this discussion並試用了此：

tr td.Date:nth-child(2) { background-color: #666; color: #fff; }​ 

也許我可以以某種方式使用與TR山坳功能：第n？

Answer 1

您可以應用.Date背景上tr:nth-child(odd)或tr:not(:nth-child(even))

.TabSymbols tr:nth-child(even) { background-color: #f2f2f2; } 
 
/*.TabSymbols tr:nth-child(odd) .Date { background: #666; color: #fff; }*/ 
 
.TabSymbols tr:not(:nth-child(even)) .Date { background: #666; color: #fff; }

<table class="TabSymbols"> 
 
    <tr> 
 
    <td class="Date">foo</td> 
 
    <td>foo</td> 
 
    <td>foo</td> 
 
    <td>foo</td> 
 
    </tr> 
 
    <tr> 
 
    <td>foo</td> 
 
    <td>foo</td> 
 
    <td class="Date">foo</td> 
 
    <td class="Date">foo</td> 
 
    </tr> 
 
    <tr> 
 
    <td>foo</td> 
 
    <td>foo</td> 
 
    <td class="Date">foo</td> 
 
    <td>foo</td> 
 
    </tr> 
 
    <tr> 
 
    <td>foo</td> 
 
    <td class="Date">foo</td> 
 
    <td>foo</td> 
 
    <td>foo</td> 
 
    </tr> 
 
</table>