CSS прямой потомок ">" оператор не работает (а это не IE6)?

Я пытаюсь сделать что-то очень простое - выберите теги, которые являются прямыми потомками тега.

Используемый мной CSS выглядит следующим образом:

table.data > tr { background-color: red; }

Мой HTML выглядит так:

<table class="data">
    <tr>
        ...
    </tr>
</table>

Но красный фон не появится! Если я удалю символ " > " из CSS, он будет работать! Я пробовал это в Firefox, IE 8, Chrome и Safari, и все браузеры делают то же самое.

Надеюсь, кто-то может мне помочь после стольких разочаровывающих часов! Я знаю, что делаю что-то очень глупое, но я не могу понять, что это такое.

Ответы

Ответ 1

Большинство браузеров 1 автоматически вставляют элемент tbody в table, поэтому css должен быть:

table.data > tbody > tr { background-color: red; }

чтобы учесть это.

1 Я думаю, что все браузеры делают это, но у меня нет возможности или времени проверить это предположение. Если вас беспокоит, что могут быть некоторые пользователи с браузером, который этого не делает, вы можете предложить оба селектора в css:

table.data > tr,
table.data > tbody > tr { background-color: red; }