CSS 伪类选择器 last-child 和 last-of-type 的区别

“最后一个”伪类选择器

:last-child

• 语法

  element:last-child { style properties }

• 解释

  :last-child 代表在它父元素中的最后一个子元素。

• 正例

  • 代码

  
  
  
  
  
    
  第 1 行
    
  第 2 行
    
  第 3 行
    
  第 4 行
    
  第 5 行
    
  第 6 行
   
    
  第 7 行
   
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28

  • 效果截图
    

• 反例

  • 代码

  
  
  
  
  
    
  第 1 行
    
  第 2 行
    
  第 3 行
    
  第 4 行
    
  第 5 行
    
  第 6 行
   
    
  第 7 行
   
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28

  • 效果截图
    

  反例为何没有生效呢？
  【关键点】 因为 div.list 最后一个元素是 div.item ，而不是 p.item。

:last-of-type

• 语法

  element:last-of-type { style properties }

• 解释 1
  :last-of-type 表示了在它父元素的子元素列表中，最后一个给定类型的元素。

• 示例 1

  • 代码

    
    
  
    
    
  
      
  第 1 行
      
  第 2 行
      
  第 3 行
      
  第 4 行
      
  第 5 行
      
  第 6 行
   
      
  第 7 行
   
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28

  • 效果截图
    

• 解释 2
  当代码类似 Parent tagName:last-of-type 的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

• 示例 2

  • 代码

  
  
  
  
   
    
  第 1 行
    
  第 2 行
    
  第 3 行
    
  第 4 行
    
  第 5 行
    
  第 6 行
    
    
  第 7 行
    
   
      
  第 1 行
      
  第 2 行
      
  第 3 行
      
  第 4 行
    
      
  第 5 行
    
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39

  • 效果截图
    

总结

• element:last-child 必须要满足两个条件才能生效：

  • 必须是匹配 element 选择器的在同级（siblings）元素中的最后一个（即是其父元素的最后一个子元素）

  • element 选择器的在同级（siblings）元素中的最后一个元素必须与 element 选择器匹配。

• element:last-of-type 只要是其父元素的最后一个匹配 element 选择器的元素即可生效。甚至会对后代满足匹配规则的元素也生效。

last-of-type 本文只做了基本介绍，它还有其他匹配规则，比如元素分组等，由于目前还没有找到合适资源，后续会继续分享，将请期待！

参考文章

• CSS 选择器 :last-child 与:last-of-type 的区别
• css 中:last-child 不生效的解决方法
• :last-of-type - CSS（层叠样式表） | MDN
• :last-child - CSS（层叠样式表） | MDN