jquery:如何在表中使用 ">"和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
});

结果:第一个表格的背景已更改，但第二个表格未更改。似乎空格选择器有效，但“>”和“children()”选择器不起作用，为什么？

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

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

Answer 1

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

尝试

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