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