gwt style nth-child与first-child碰撞

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;
}