nth-child与nth-of-type的差异性

学习css3很容易混淆的两个伪类选择器，作用很相似，却还是有很大的差别的。从代码中学习无疑是最好的途径

HTML部分

这个情况下，两种选择器实现的效果是相同的。注意，括号里面的数字是从1开始的，不是从0开始。那么他们两个的差异性到底在哪呢？

其实，p:nth-child（2）是在p元素的父级去寻找第2个节点元素，如果这个元素是p的话就被选中，如果不是那么将没有效果。而p:nth-of-type(2)限制的条件相对就更宽松了，就是去找P元素的父级下面找第2个P元素，无论他排第几位都会被找到。注意，两个选择器全局都会进行查找，不会只在一个父元素下面查找。

代码如下

p元素父级下的第一个子节点如果是p元素的话，设置字体颜色为红色；p元素父级下的第二个子节点如果是P元素如果是P元素的话，设置字体颜色为蓝色。但是可以看到此时p元素父级的第二个子节点是h4所以设置无效果。

执行效果

还是使用上面的html结构，让我们看看nth-of-type会有怎样的效果。

在h4父级下去找第一个h4标签，将字体颜色设置为红色；在h4父级下找第二个h4标签，将字体颜色设置为蓝色。

执行效果

从代码上我们已经大概看出来它们两的区别了。nth-child限制条件比nth-of-type要多，如果搞不清楚它们两的区别，还是建议少用nth-child，很容易出不来想要的效果，可以用nth-of-type代替。不过作为一名合格的前端人员，还是要多多熟悉这些选择器才是，考清楚了原理，一切都会很清楚。

由于本人还处在菜鸟阶段，未免会有一些错误，希望看到的同学能够指出来，笔者一定改正，不误导其他人。以上，感谢阅读。