gwt风格的第n个孩子与第一个孩子发生冲突

Question

我想在GWT中为FlexTable定义一组CSS规则。我为奇数和偶数的所有组合定义了4个不同的规则。

.myTable tbody tr:nth-child(odd) td:nth-child(odd) {
    background: #EEEEDD;
}

它工作得很好，但现在我想为表的第一行定义单独的样式。我试着做这样的事情：

.myTable tbody tr:first-child {
    background: #123456;
}

但它不适用于之前的4条规则。它被忽略。你对如何为表的第一行定义单独的样式有什么建议吗？

Answer 1

由于在第一个规则中将背景应用于td元素，因此需要将其应用于第二个规则中的td元素。

假设您希望整个第一行中的所有单元格都有相同的不同背景：

.myTable tbody tr:first-child td:nth-child(even), 
.myTable tbody tr:first-child td:nth-child(odd) {
    background: #123456;
}

为了缩短时间，这里有一个技巧，使用:nth-child(n)来匹配所有td元素：

.myTable tbody tr:first-child td:nth-child(n) {
    background: #123456;
}