上来先磨叨两句，用这个选择器已经很久了，但是一直用的都是:nth-of-type这个，:nth-child只是记得，几乎没有用过，最开始知道这两个选择器的时候，肯定两个都用过，但最后一直就用:nth-of-type了，原因我也忘记了，前几天用到:nth-of-type这个选择器，突然忘了他和:nth-child的具体区别是什么了，所以在这里，在回顾一下。

child和of-type 家族

child 家族
:first-child        p:first-child       选择属于父元素的第一个子元素的每个 <p> 元素。
:nth-child(n)       p:nth-child(2)      选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)  p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:last-child         p:last-child        选择属于其父元素最后一个子元素每个 <p> 元素。
:only-child         p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。

of-type 家族
:first-of-type          p:first-of-type         选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:nth-of-type(n)         p:nth-of-type(2)        选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)    p:nth-last-of-type(2)   同上，但是从最后一个子元素开始计数。
:last-of-type           p:last-of-type          选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type           p:only-of-type          选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。   

:nth-of-type(n)和:nth-child(n)对比

这两个家族别的选择器还好说，就:nth-of-type(n)和:nth-child(n)他们俩用的时候还会有一些问题，下面用具体例子来体会一下。

<body>
<style>
p:nth-child(2){
    background: red;
}
p:nth-of-type(2){
    background: red;
}
</style>
<div>
    <p>我是p1</p>
    <p>我是p2</p>
</div>
</body>

此时分别使用这两个css选择器进行渲染时，页面显示的效果是一样的，look

然后我们稍稍改一下再看一下效果

<body>
<style>
p:nth-child(2){
    background: red;
}
p:nth-of-type(2){
    background: red;
}
</style>
<div>
    <div>我是div1</div>
    <p>我是p1</p>
    <p>我是p2</p>
</div>
</body>

这一下就不友好了，字面理解一下啊，child儿子嘛，第二个儿子，还是个p标签，正好给你变个色吧。而p:nth-of-type(2)他就会去找p标签的第二个，这样我的心里感觉才是我想要的结果我们在加一个div看看啊

<body>
<style>
p:nth-child(2){
    background: red;
}
/*p:nth-of-type(2){
    background: red;
}*/
</style>
<div>
    <div>我是div1</div>
    <div>我是div2</div>
    <p>我是p1</p>
    <p>我是p2</p>
</div>
</body>

看吧，第二个儿子，没有p标签啊，那算了吧，谁也不给上色了。

个人建议找元素，还是用:nth-of-type()，毕竟不用太费脑子，而且照的还快、准、稳。

浏览器兼容情况：所有主流浏览器均支持，除了 IE8 及更早的版本。毕竟是css3新添加的嘛。

上面详细的对比了一组，下面在简单对比一下别的

p:first-child和p:first-of-type

p:nth-last-child(n)和p:nth-last-of-type(n)

注意哦：last是从后往前数楼！！

p:last-child和p:last-of-type

p:only-child和p:only-of-type

因为他是only了，这里div和p都是两个所以不成立，就都不上色了。改成这样在看看，

<body>
<style>
p:only-child{background: red;}
p:only-of-type{background: red;}
</style>
<div>
    <div>我是唯一的div</div>
    <p>我是唯一的p</p>
</div>

总结一下

是不是有点感觉了，小小的总结一下 child家的成员在进行选择的时候不仅要选择元素，而且还要选择当前位置对不对，only的话那就只能有p(拿p举一下例子啊)，div哥哥来了就不高兴了，就不给你显示。

of-type家的成员在进行选择的时候不管你里面有哪个哥哥弟弟p、div、span，选择器元素写好了，他就会按照当前的元素进行查找。

个人还是倾向于of-type家的。快、准、稳，哈哈，今天就到这了，忙了好久，终于有点时间了，上来晃一圈。

如有错误之处，欢迎指正。