CSS child selector: can't select rows direct children of table, excluding children of sub-table

Question

我不明白为什么我无法实现 selecting 行是 table 的直接子行（假设其他子 table 包含在 TD 中主要 table，我只想要直接子行，而不是后代行 tables).

这里是彻底简化后的剩余结构（另见jsfiddle here）：

<body>
    <table>
        <tr>
            <td>TR 1 - TD 1 </td>
            <td>TR 1 - TD 2 </td>
        </tr>
        <tr>
            <td>TR 2 - TD 1</td>
            <td>
                <table>
                    <tr>
                        <td>Table 2 - A </td>
                        <td>Table 2 - B </td>
                    </tr>
                    <tr>
                        <td>Table 2 - C</td>
                        <td>Table 2 - D</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

我无法 select 主 table:
的直接子行 - body>table tr {background-color:lightgray;} 逻辑上 selects table 和子 table 的所有行 - body>table tr tr {color:blue;} 逻辑上 selects 所有子行 - table only
- 但是 body>table>tr {color:red;} 根本select什么都没有（看不到红色文字）

我做错了什么？在结构上？在 selectors?
->jsfiddle

Answer 1

a tbody 元素不在标记中时可能会自动插入（副作用是 table > tr 选择器可能会失败），因此请尝试使用 [=12 更改最后一条规则=].

示例：http://jsfiddle.net/wn84hotm/2/

CSS child selector: can't select rows direct children of table, excluding children of sub-table

CSS child selector: can't select rows direct children of table, excluding children of sub-table

css

css-selectors