过滤选择器first与子元素过滤选择器first-child的区别

1、表格代码如下：

<table id="table">
            <tr>
                <td>id</td>
                <td>name</td>
            </tr>
            <tr>
                <td>1</td>
                <td>aaa</td>
            </tr>
            <tr>
                <td>2</td>
                <td>bbb</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ccc</td>
            </tr>
        </table>

2、表格显示如下：

id	name
1	aaa
2	bbb
3	ccc

3、分析first和first-child

过滤选择器first

首先找到id为t2的元素，再查找下面的子元素tr,从第一个tr元素开始查找子元素:第一个td,找到以后停止

$("#t2 tr td:first").css("background","red");

子元素过滤选择器first-child

首先找到id为t2的元素，再查找下面的子元素tr，然后查找每一个tr下边的第一个td元素。

$("#t2 tr td:first-child").css("background","red");