:last-child和:last-type-of

一.last-child
使用中:last-childが無効な場合、主にスタイルが間違っています.
el:last-childのマッチングルールは:

elセレクタマッチング要素のすべての同級要素(siblings)を検索します.

は、兄弟要素の最後の要素を検索します.

最後の要素がセレクタ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.正しい書き方:親を1つ使って、すべてのitemを包むだけでいい

    

        
1
        
2
        
3
    
    
    

  :nth-child(n)
二.last-of-type
el:last-of-typeのマッチングルールは:

elセレクタに一致する要素「同じラベル」のすべての同級要素(siblings)を検索します.

上記で見つかった要素のうち、最後の要素を検索します.

最後の要素がセレクタ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