:last-child与:last-of-type你只是会用，有研究过区别吗？

:last-child与:last-of-type

同学们遇到过给同一组元素的最后一个元素设置css失效的情况吗？我遇到过，当时使用:last-child居然不起作用，看到名字不科学啊，明明是“最后一个元素”，那为什么设置CSS失效呢？今天来一探究竟吧

• 先看一组:last-child正常工作的代码

    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
        
    

效果图1

• 再先看一组:last-child不正常工作的代码

    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
我是来骚扰的
        
    

效果图2

问题抛出来了，那么来研究下:last-child和:last-of-type究竟是何方神圣。

1. :last-child：The last-child CSS pseudo-class represents the last element among a group of sibling elements.（:last-child这个css伪类代表的一组兄弟元素当中最后一个元素）但经过代码发现，它说的一组元素应该是指其父元素的所有子元素且类型为:last-child前面指定的类型的一组元素。

2. :last-of-type：The last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.（:last-of-type这个css伪类代表其类型的一组兄弟元素中的最后一个元素）所以它指的是和:last-of-type前面的元素类型一致的一组元素的最后一个元素

同理：:nth-last-child和:nth-last-of-type的区别在于父元素的子元素中且与:nth-last-child前面的元素类型一致的最后一个元素

做个验证

• :nth-last-child可以正常工作的代码

  
  
    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
        
    

  

效果图3

• :nth-last-child不能正常工作的代码

 
  
    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
我是来骚扰的
        
    

  

效果图2

• 接下来:nth-last-of-type闪亮登场

    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
我是来骚扰的
        
    

效果图3