Как использовать CSS для стилизации потомка (не прямого потомка) элемента?

Question

Я пытаюсь переопределить стиль потомка (не прямого потомка) элемента с помощью CSS.

Скажи, я работаю над:

<table id="z_d__h3-real" class="z-hbox">
 <tbody>
   <tr valign="top">
   -----
   </tr>
  </tbody>
</table>

Я хочу переопределить стиль, чтобы установить для val значения элемента tr значение «center».

Я пытался сделать:

table.z-hbox tr {
    vertical-align:center;
}

Это не работает, хотя. Я предполагаю, что table.z-hbox tr ищет прямого потомка <tr>, который здесь не тот. Как <tr> завернут в <tbody>

Как мне это исправить?

Answer 1

Встроенные стили имеют более высокий приоритет, чем те, которые определены в тегах или в таблице стилей.Либо удалите атрибут valign="top" (он в любом случае устарел в новых версиях стандарта HTML), либо, если вы не можете изменить разметку, пометьте правило CSS как !important.Сам селектор хорош (вы можете проверить это, добавив другие правила).

Answer 2

Проблема не с приоритетом.Я понял, что это должно быть

вертикальное выравнивание: среднее вместо вертикального выравнивания: центр

Это работает.

Answer 3

Ваш CSS в порядке.Пробел между селекторами выбирает потомков, > потребуется для прямых потомков.

Ваша проблема в том, что встроенный атрибут имеет приоритет над стилем в таблице стилей.Вы можете попробовать использовать !important, но я честно не знаю, как работает приоритет с устаревшими атрибутами HTML.Я никогда не использую их.