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

Question

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

Я использую следующий CSS:

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

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

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

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

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

Answer 1

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

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

для учета этого.

---

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

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