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