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; }