jquery:how 在 table 中使用“>”和 children()

Question

Html代码：

<table>
    <tr>
        <td>The first row</td> <td>The first row</td>
    </tr>
    <tr>
        <td>The second row</td> <td>The second row</td>
    </tr>
    <tr>
        <td>The third row</td> <td>The third row</td>
    </tr>
    <tr>
        <td>The forth row</td> <td>The forth row</td>
    </tr>
</table>
<hr>
<table>
    <tr>
        <td>The first row</td> <td>The first row</td>
    </tr>
    <tr>
        <td>The second row</td> <td>The second row</td>
    </tr>
    <tr>
        <td>The third row</td> <td>The third row</td>
    </tr>
    <tr>
        <td>The forth row</td> <td>The forth row</td>
    </tr>
</table>

jQuery代码：

$(function () {
    $("table:first tr").css("background", "#ffbbbb");   //work
    $("table:last>tr").css("background", "#ffbbbb");   //not work
    $("table:last").children("tr").css("background", "#ffbbbb");  //not work
});

结果：第一个table的背景变了，第二个table没有。 似乎 space 选择器起作用了，但是 '>' 和 'children()' 选择器不起作用，为什么？

工作示例： https://jsfiddle.net/6knk67gd/1/

我检查了这两个选择器的用法，但在我的代码中仍然找不到任何问题。请告诉我如何正确使用它们，谢谢~

Answer 1

即使我们没有创建 tbody，默认情况下 dom 结构也会创建它，因此所有 tr 都是 tbody/thead/tfooter 的子节点而不是 table本身

尝试

$("table:last > tbody > tr").css("background", "#ffbbbb");

Answer 2

符号>表示直系后代，在table和tr之间自动生成一个tbody。试试这个：

$("table:last > tbody > tr").css("background", "#ffbbbb");

jquery:how 在 table 中使用“>”和 children()

jquery:how to use ">" and children() in table

jquery

parent-child

jquery-selectors