:last-childと:last-of-type

学生たちは同じグループの要素の最後の要素にcssの失効を設定したことがありますか?私は出会ったことがあって、その時:last-childは意外にも役に立たないで、名前が科学的ではありませんことを見て、明らかに“最後の要素”で、それではどうしてCSSを設置して失効しますか?きょうは真相を探ってみよう

まず、:last-childが正常に動作するコードのセット

を参照してください.

    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
        
    

1

:last-childが に しないコード

のセットを てみましょう.

    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
      
        
    

2
が げ されたので、last-childと:last-of-typeはいったいどこが なのかを します.

:last-child:The last-child CSS pseudo-class represents the last element among a group of sibling elements.(:last-childというcss クラスは、 の の のセットを す)が、コードによって された. のセットは、 のすべてのサブ を し、last-childの に されたタイプの のセットを すべきである.

:last-of-type:The last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.(:last-of-typeこのcss クラスは、そのタイプの のセットの の を す)したがって、last-of-typeの の タイプと する のセットの の

を す.
じ ::nth-last-childと:nth-last-of-typeの いは、 のサブ であり、nth-last-childの の タイプと する の です.
をする

:nth-last-childが に するコード

  
  
    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
        
    

  

3

:nth-last-childが に しないコード

 
  
    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
      
        
    

  

2

:nth-last-of-typeキラキラ

    
        
        
        
        

    

    
        

            
1
            
2
            
3
            
      
        
    

3