:first-child以及:last-child易错点

前言

对选择器理解的不够深入，今天说说以下几个选择器：:first-child, :last-child, :first-of-type, :last-of-type。比较常见的场景是，最后一行去掉下划线。

定义

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
:last-child 选择器匹配属于其父元素的最后一个子元素。
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素。
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素。

注意，很重要的一点，父元素。

虽然body也可以作为父元素，但是实际开发中html结构是很复杂的，所以建议书写清晰的结构。

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

E:last-child要求，E元素必须是父元素的最后一个元素。(位置顺序)
情况一 VS 情况三

E:last-of-type，E元素不一定是父元素的最后一个元素，可能是倒数第二个，或者其他。(类型)
情况二 VS 情况五

E:last-of-type, 当class和tag冲突时，class无效
情况四 VS 情况五

demo

  

  
    
    
    
  
  
    

      
情况一
      
我是樱桃子
      
我是花轮
      
我是安德烈
      
我是来捣乱的
    
    

      
情况二
      
我是樱桃子
      
我是花轮
      
我是安德烈
      
我是来捣乱的
    
    

      
情况三
      
我是樱桃子
      
我是花轮
      
我是安德烈
      
我是来捣乱的
    
    

      
情况四
      
我是樱桃子
      
我是花轮
      
我是安德烈
      
我是来捣乱的
    
    

      
情况五
      
我是樱桃子
      
我是花轮
      
我是安德烈
      
我是来捣乱的