选择元素里面的第一个子元素，可以使用 :first-child … 它跟之前我们介绍的 :first 选择器有些区别 … first 的意思是找到第一个结果 … 而 :first-child 选择的是第一个子元素 … 也就是说它可能会找到多个结果 …

比如我们找出作为第一个子元素的 img 元素 …

$( 'img:first-child' )

找到的结果就是所有作为第一个子元素的 img 元素 … 包括这个小的头像图像 … 我们可以看一下源代码 …

这个小头像图像是在 h6 标签的下面 … 相对于它的父元素 h6 ，这个小头像属于它的第一个子元素 … 所以找到的结果里面也会包含它 …

不过如果我们把这个头像直接移到 li 标签的下面 ..

现在这个 li 标签里面有两个 img 元素 … 它的第一个 img 类型的子元素是这个小头像的上面这个 img 元素 …

保存 …

刷新 … 再去试一下 … $( 'img:first-child' )

返回的结果里面，就不会包含这个小头像了 … 因为现在它不属于第一个子元素 …

下面我们再试一下 :last-child ..

$( 'img:last-child' )

这次返回的结果里面，只有这个小头像图像 … 因为在所有的 img 元素里面，只有它属于它的父元素里的最后一个子元素 …