关于css选择器中nth-of-type和nth-child的区别

前言

今天学习了css选择器，发现有两个伪类nth-of-type和nth-child在功能上十分相似，却又有不同的地方。但我发现无论是在MDN上，还是在w3school、菜鸟教程上，对这两个伪类选择器的对比说的都不是很明白。这篇文章就是对这两个伪类的简单探究~

nth-of-type和nth-child的区别

nth-of-type和nth-child都是css3中的伪类选择器，其功能也都是选取父元素下的直接子元素，那么他们的区别在哪里呢？

其实他们的区别就在type和child上。

nth-of-type的关键词是type，即他关心的是类型。它不会对所有子元素生效，只会对子元素中符合选择器要求的类型的子元素进行筛选，而忽略非选择器要求的类型的子元素。ele:nth-of-type(n)的意义就是选择父元素下的第n个ele类型的子元素。

nth-child的关键词是child，它关心的是所有子元素。它会对所有子元素生效。ele:nth-child的意义就是选择父元素下的第n个子元素，如果他是ele类型的，那么对他生效，如果他不是ele类型的，则不生效。

简而言之，nth-child影响到了所有child子元素，而nth-of-type则影响到了相应type的子元素。

例子

看一下下面代码所示的例子：

    


  

    
ReedSun1
    
ReedSun2
    
ReedSun3
    
ReedSun4
    
ReedSun5
  
  

    
ReedSun1
    
ReedSun2
    
ReedSun3
    
ReedSun4
    
ReedSun5
  

我们来将n依次替换成1 2 3 4 5 ，运行代码，观察结果。

• 当n等于1和2时，我们发现，两个div是一样的，都是ReedSun1和ReedSun2分别背景变为黄色。
• 当n等于3时，出现不同了，第一组中ReedSun4背景变成了黄色，而第二组中没有元素背景变色。
• 当n等于4时，第一组中没有元素变色，第二组中ReedSun4背景变色。
• 当n等于5时，两组都没有背景变色的元素。

这个代码实验印证了我们的结论。

• div中第三个h1子元素是ReedSun4，这就导致n等于3时第一组中是ReedSun4变色的情况。
• div一共只有三个h1子元素，所以当n等于4或5的时候，第一组元素均不会出现背景变色的情况了。
• div中1 2 4子元素是h1元素，而3 5不是，所以第二组中，n等于3或5时没有元素背景变色，n等于1 2 4时，相应的元素背景变色。

总结

本来以为这两个伪类选择器要用非常复杂的语言才能解释清楚。现在看来，只要抓住关键字，也能轻松应对。

总之，这两个伪类选择器的区别就是type和child的不同，只要把握住这一点，就肯定能记住他们两个的区别了。

共勉~