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

结果：第一个表的背景已更改，但第二个表未更改。 似乎空间选择器有效，但'＆gt;'和'children（）'选择器没有，为什么？

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

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

Answer 1

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

尝试

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

Answer 2

标志＆gt;表示直接后代，并且在表和tr之间自动生成tbody。试试这个：

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

jquery：如何使用“＆gt;”和表中的children（）

2 个答案: