CSS3中,我們經常會用到:last-child偽類來選擇某個元素的最后一個子元素。不過除了這個偽類外,CSS3還提供了一個:last-of-type偽類,他可以選擇某個元素類型的最后一個子元素。
例子: /* 選擇所有li元素的最后一個子元素,即最后一個li元素 */ li:last-child { color: red; } /* 選擇所有div元素中的最后一個 p 元素*/ div p:last-of-type { font-weight: bold; }
可以看出,如果我們只用:last-child偽類,他只能選擇某個元素的最后一個子元素,而無法對某個元素類型的最后一個元素進行選擇。所以當我們需要選擇同一類型元素的最后一個元素時,就可以使用:last-of-type偽類進行選擇。
然而,使用:last-of-type偽類時要注意,它只會選擇與你指定元素類型相同的最后一個子元素。如果該元素類型不存在,則不會匹配任何元素。因此,在使用時,我們要先判斷一下選擇器的具體含義,以免出現意外。
綜上所述,CSS3中的:last-of-type偽類可以很好地幫助我們選擇某個元素類型的最后一個子元素,它是一個非常好用的選擇器,也為我們的前端開發提供了更多的靈活性。
上一篇css3 顯示 漸變