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

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

• 舉個(gè)例子：

• 從代碼和圖可以看出:last-child選擇了最后一個(gè)li標(biāo)簽。

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

• ?

  • 從代碼和圖可以看出，:last-child并沒有起到我們想要的作用。如果，這個(gè)時(shí)候去掉最后的div標(biāo)簽，再看看效果。

  • 這時(shí)，效果出來了，那么，可以總結(jié)了。

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

    ?

    :last-of-type

    • 關(guān)于:last-of-type手冊(cè)中是這么解釋的：

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

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

      直接用上面兩個(gè)栗子。

      沒有干擾元素，OK。

    • 有干擾元素，OK。

    • :last-of-type表示其父元素下的最后一個(gè)指定類型的元素。

      ?

    結(jié)尾

    • 總結(jié)了一番，對(duì)于什么場(chǎng)景下使用:last-child和:last-of-type又了相應(yīng)的認(rèn)識(shí)，以后犯錯(cuò)的可能性就會(huì)降低了很多。

?

轉(zhuǎn)載于:https://www.cnblogs.com/saryli/p/8490247.html

總結(jié)

以上是生活随笔為你收集整理的CSS 选择器 :last-child与:last-of-type的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。