:last-child和:last-type-of

一.last-child

遇到使用:last-child无效的情况，主要是样式写的不对。

el:last-child 的匹配规则是：

1. 查找 el 选择器匹配元素的所有同级元素（siblings）。
2. 在同级元素中查找最后一个元素。
3. 检验最后一个元素是否与选择器 el 匹配。

 

1. 错误示例

    
1
    
2
    
3
    
查看更多

.item{
  margin-bottom: 20px;
  color:red;
  font-size: 16px;
  
  
}
.item:last-child{
   margin-bottom: 10px;
   color:blue;
}

 

上面的样式不起作用，因为最后一个兄弟元素是show-more,不符合选择器.item的条件。

2. 正确写法：用一个父类，将所有的item包裹起来即可

    

        
1
        
2
        
3
    
    
查看更多

  :nth-child(n)

二.last-of-type

el:last-of-type 的匹配规则是：

1. 查找 与el 选择器匹配元素“相同标签”的所有同级元素（siblings）。
2. 在上述所找到的元素中查找最后一个元素。
3. 检验最后一个元素是否与选择器 el 匹配。

 

1.错误示例：

    
1
    
2
    
3
    
查看更多

.item{
  margin-bottom: 20px;
  color:red;
  font-size: 16px;
  
  
}
.item:nth-last-of-type(1){
   margin-bottom: 10px;
   color:blue;
}

上述样式不会生效，因为找到的元素是show-more,不符合要求。

2. 正确写法： 修改show-more的标签，让它不是div，则样式可以生效。

    
1
    
2
    
3
    
查看更多

:nth-last-of-type选择器也是类似。

综上： last-of-type和last-child的主要区别在于: last-of-type选择器还需要考虑el选择器元素的标签。

 

参考资料：

https://segmentfault.com/q/1010000011647969