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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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