:last-child和:last-type-of

一.last-child

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

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

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

 

1. 错误示例

<div class = "content">
    <div class = "item">1</div>
    <div class = "item">2</div>
    <div class = "item">3</div>
    <div class = "show-more">查看更多</div>
</div>

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