gwt style nth-child сталкивается с first-child

Question

Я хочу определить набор правил CSS для моей FlexTable в GWT.Я определил 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;
}