css - gwt 风格第 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;
}