Селектор смотрит на детей потом внуков, а не просто внуков?

Question

У меня есть следующие селекторы, которые предназначены для того, чтобы дать первой строке таблицы правильные свойства border-radius:

table.alt tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 }
table.alt tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 }
table.alt tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

Идея состояла в том, чтобы разрешить появление любой первой строки, находящейся в ней.головка стола или тело стола, которые должны быть должным образом стилизованы с нужным радиусом границы в верхнем левом и правом углах.Я надеялся исключить часть thead / tbody / tfoot, что он будет искать только первую строку таблицы, найденную в таблице, но это не так.Он постоянно пытается сопоставить первую строку таблицы в каждой из thead / tbody / tfoot отдельно.Таким образом, кажется, что запускаются селекторы, более похожие на это:

table.alt > * > tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 }
table.alt > * > tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 }
table.alt > * > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

Это можно легко исправить для нижнего колонтитула таблицы с помощью *:not(tfoot), но все еще существует проблема разграничения между thead и tbody элементов.В то время как у большинства моих таблиц будет заголовок таблицы, не у всех из них будет.

Есть ли способ обойти эту дилемму, или, может быть,лучшая альтернатива для применения border-radius ко всем углам таблицы?
_{Примечание: Я применяю цвет фона для каждой ячейки таблицы, чтобы он перекрывал внешний вид таблицы.граница радиуса.Я также использую * в последнем разделе, чтобы он мог соответствовать th или td.}

Answer 1

Дух, простой способ это исправить. Просто заставьте второй раздел взглянуть на первого дочернего элемента таблицы, а затем посмотрите на первую строку в этом разделе ... Это также хорошо подойдет для выполнения нижних углов, вместо этого ищите последний дочерний и последний ряд в этом разделе.

table.alt > *:first-child > tr:first-of-type > *:first-child { border-radius: 5px 0 0 0 }
table.alt > *:first-child > tr:first-of-type > *:last-child { border-radius: 0 5px 0 0 }
table.alt > *:first-child > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

Не могу поверить, что мне понадобилось так много времени, чтобы понять это. Выглядит немного неаккуратно, но он выполняет свою работу.