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

:nth-child()表示父元素下的第n个子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素则没有匹配的元素 　:nth-of-type()表示父元素下的第ｎ个类型的元素　比如div p:nth-of-type(2)表示div下的第二个ｐ元素。

基本代码如下:

    
        
        

        
    
    
        

            
ppp
            
ppp
            
div
            
div
            
article
            
div
            
div
            
div
            

                
ul中的li标签
            
            
p标签里面的span标签
            span
        
    

效果如下:

    后面的例子中，始终以此代码为标准，只增加CSS样式，DOM部分不变。

    现在我们开始以实例来看不同伪类选择器所展现出来的效果:

1、:nth-child

效果如下：

• 

我们在使用nth-child时，并没有在其前面指定类型，现在选中的是.box下的第二个子元素。

2、:nth-of-type.

效果如下:

选中的是第二P标签和第二个div标签。
结论1：在不指定类型时，nth-child(n)选中的是父元素下的第N个子元素。nth-of-type(n)选中的是父元素下的不同类型标签的第N个。

3、div:nth-chiid.

效果如下：

没有元素被选中。

在试试看p:nth-child(2);

效果如下：

选中的是.box的第二个子元素，这个子元素的标签是P。

4、div:nth-chiid.

选中的是.box下的div标签的第二个子元素

结论2：ele:nth-child(n)要求不仅仅是第n个子元素，并且这个子元素的标签是ele。ele:nth-of-type(n)选择的是父元素下ele标签的第二个

5、nth-last-child(n)和nth-last-of-type(n)的用法和nth-child(n),nth-of-type(n)用法相同，唯一的区别是:nth-last-child(n)是倒数第n个元素.nth-last-of-type(n)是倒数第n个标签。

6、last-child

效果如下:

没有选中任何元素，因为父元素下最后一个子节点都不是P标签.

如果不指定元素类型:

效果如下:

有三个元素被选中，因为这三个元素都是其上一层父元素下的最后一个子元素.

6、last-of-type

效果如下：

选中了父元素下P标签的最后一个。

效果如下：

选中了父元素下不同类型标签的最后一个。

结论3：ele:last-child选中父元素下最后一个子元素，并且该子元素的标签必须为ele，否则一个都不选中。ele:last-of-type选中父元素下ele标签的最后一个.

7、ele:first-child、ele:first-of-type与ele:last-child、ele:last-of-type恰好相反.

简单应用:

    
        
        

        
    
    
        

            

                
Index
Name
            
            

                
1
apple
                
2
orange
                
3
lemon
                
4
mango
                
5
watermelon
                
6
grape
            
        
    

效果:

延伸:

相比大家都知道 :nth-child(2n)是选中偶数子元素
但是，如果我们想选中前6个子元素呢？
可以使用 nth-child(-n+6)

• 1
• 2
• 3
• 4
• 5
• 6

效果:

从第三个开始选中

效果:

--------------------- 作者：YvetteLau 来源：CSDN 原文：https://blog.csdn.net/liuyan19891230/article/details/52839788?utm_source=copy 版权声明：本文为博主原创文章，转载请附上博文链接！