jQuery 选择器 first-child和first-of-type、 last-child和last-of-type的区别

1.jQuery 选择器 first-child和first-of-type 的区别

测试代码：

　　<a>aaaa</a>
　　<p id="firstP">1</p>
　　<p>2</p>
　　<p>3</p>
　　<div>
    <!--可以把第一个a标签注释掉在试试 或者把这个a和下面的p换一下位置 看看first-child和first-of-type的效果 -->
    　　　　<a>Hello1</a>
    　　　　<p>Hello2</p>
    　　　　<p>Hello3</p>
    　　　　<p>Hello33</p>
    　　　　<a>Hello1</a>

    　　</div>
　　<div>
    　　　　<p>Hello4</p>
    　　　　<p>Hello5</p>
    　　　　<p>Hello6</p>
    </div>
　　<div id="testDiv">bbbb</div>

js：

$("p:first-child").css("background-color","red");


//$("p:first-of-type").css("background-color","yellow");
//
//$("p:last-child").css("background-color","red");
//
//$("p:last-of-type").css("background-color","red");

总结：first-child  API手册解释的有些绕口,费解，通俗来讲就是先找到p标签的父元素，然后取这个父元素的第一个子节点，如果子节点和冒号前选择器代表的标签一致的话（ps：我的例子中是找到p元素的父标签，在找到这个父元素中第一个子元素是p标签，够明白了吧），就改变背景颜色; 

          first-of-type  注意这个和上面的对比，这个是先找到这个选择器对应的父元素，然后在父元素中找到第一个符合这个选择器的标签（ps：虽然都是第一个，
但是不一样，一个是直接获取父元素的第一个子节点，后面的是获取符合条件（和冒号前面选择器一样的标签）的第一个子节点）

last-child和last-of-type同理类推就可以，有不正确的地方，欢迎大家批评指正

参考链接：http://blog.csdn.net/pa_java/article/details/46379457