CSS 選擇器 :last-child與:last-of-type的區別

:last-child----represents the last element among a group of sibling elements.

CSS偽類 :last-child 代表在一群兄弟元素中的最后一個元素。

• 舉個例子：

  

• 從代碼和圖可以看出:last-child選擇了最后一個li標簽。

  同時，我們換另外一段代碼，看看是否還有這樣的效果。

  

•  從代碼和圖可以看出，:last-child並沒有起到我們想要的作用。如果，這個時候去掉最后的div標簽，再看看效果。

• •  

    

  • 這時，效果出來了，那么，可以總結了。

    :last-child表示其父元素的最后一個子元素，且這個元素是css指定的元素，才可以生效。

    注意：:last-child 這里父元素的子元素一定是css指定元素才生效

     

    :last-of-type

     

    • 關於:last-of-type手冊中是這么解釋的：

      The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

      CSS偽類:last-of-type代表在一群兄弟元素中的最后一個指定類型的元素。

      直接用上面兩個栗子。

      沒有干擾元素，OK。

      

    • 有干擾元素，OK。

      

    • :last-of-type表示其父元素下的最后一個指定類型的元素，不必要求父元素最后一個子元素與css指定元素一樣！！！！

       

    結尾

     

    • 總結了一番，對於什么場景下使用:last-child和:last-of-type又了相應的認識，以后犯錯的可能性就會降低了很多。

       

      :last-child表示其父元素的最后一個子元素，且這個元素是css指定的元素，才可以生效。 注意：:last-child 這里父元素的子元素一定是css指定元素才生效

      :last-of-type表示其父元素下的最后一個指定類型的元素，不必要求父元素最后一個子元素與css指定元素一樣！！！！