修改表格单元格

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>