css样式选择器中:nth-child和:nth-of-type的区别

首先上概念

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
看概念，挺好理解，可是，每次实际使用的时候，就总是莫名其妙选不到想要的元素，于是我测试了各种例子，决定彻底搞清楚这两个概念。

1、:nth-child

 




  
这是第一个段落。
  
这是一个标题
  
这是第二个段落。
  
这是第三个段落。
  
这是第四个段落。

效果

用我的理解就是：.container下面的子元素，第3个，同时，还得是个p元素，就是满足条件的元素，同样适用于样式选择器的情况，看下一个例子:

 
 



    

        
这是第一个段落。
        
这是一个标题
        
这是第二个段落。
        
这是第三个段落。
        
这是第四个段落。
    

image.png

同样用那句话，.container下面的子元素，第3个，同时，还得是个class='pp'的元素，就是满足条件的元素，这边都是不分类型的，只要是.container下面的子元素就行了。

2、:nth-of-type

其实跟:nth-child都一样，就一个地方不一样：排序选择第3个元素的时候，得是同类型的标签，看例子：

 



    

        
这是一个标题
        
这是第一个段落。
        
这是第二个段落。

        这是第一个span
        这是第二个span
        这是第三个span

        
这是第三个段落。
        
这是第四个段落。
    

image.png

我给:nth-of-type(3)的元素设置了字体颜色，可以看到，第3个class='pp'的p元素和class='pp'的span元素的字体颜色都发生了改变，因为:nth-of-type是根据标签类别排序的，所以存在多个选择的情况

总结啦

虽然.pp:nth-child(3)和.pp:nth-of-type(3)这两种写法，都是先写了选择器，后排序选择，但是我觉得应该是先排序选择，再加上一个选择器的条件，重点：两者是&的关系啦，这样觉得就好理解多了。

回过头来再看概念，哦~~理解了，你呢？

个人示例，有误欢迎指正

over