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

大多数^1个浏览器会自动将tbody元素插入到a中table,因此css应该是:

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

考虑到这一点.

¹我认为所有浏览器都这样做,但我没有足够的时间来检查这个假设.如果您担心某些用户的浏览器不能执行此操作,您可以在css中提供两个选择器:

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