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

Question

HTML code:

<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 Code:

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

Result: The background of the first table is changed, but the second table is not. It seems that the space selector worked, but the selector '>' and 'children () doesn't, why?

Working example: https://jsfiddle.net/6knk67gd/1/

I checked the use of these two selectors, but still cannot find any problems in my code. Please tell me how to use them correctly, thanks ~

Answer 1

Even if we do not create tbodythe default structure dom create it, so that all trwill have a child element tbody/thead/tfooterdoes not itselftable

Try

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

Answer 2

> , tr. :

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