CSS?:last-of-type偽類選擇器用于匹配屬于其父元素的特定類型的最后一個子元素的每個元素。

換句話來說，:last-of-type偽類選擇器匹配父元素中最后一次出現的某類子元素，例如：

< article > ?? < h1 >標題</ h1 > ?? < p > ???? 第一個段落... ?? </ p > ?? < p > ???? 第二個段落... ?? </ p > </ article >

如果使用下面的CSS規則來添加樣式，那么第二個段落的文字大小將被修改：

p:last-of-type { ???? font-size : 2em ; }

?示例代碼

假如你有一段這樣的HTML代碼：

< div class = "container" > ???? < h1 >標題</ h1 > ???? < nav > ???????? < ul > ???????????? < li >列表項一</ li > ???????????? < li >列表項二</ li > ???????????? < li >列表項三</ li > ???????????? < li >列表項四</ li > ???????? </ ul > ???? </ nav > ???? < article > ???????? < h2 >標題</ h2 > ???????? < p > ???????????? 段落內容... < a href = "#" >超鏈接1</ a >... < a href = "#" >超鏈接2</ a > ???????? </ p > ???????? < p > ???????????? 段落內容... ???????? </ p > ???? </ article > ???? < article > ???????? < h2 >標題</ h2 > ???????? < p > ???????????? 段落內容... ???????? </ p > ???????? < p > ???????????? 段落內容... ???????? </ p > ???? </ article > </ div >

下面的代碼會匹配.container容器中的最后一個article元素。

article:last-of-type { ???? background-color : #eee ; ???? border : 1px solid #ddd ; }

下面的代碼會匹配所有article元素的最后一個p段落。

p:last-of-type { ???? font-weight : bold ; }

下面的代碼通過::after偽元素來為最后一個超鏈接元素設置樣式。

a:last-of-type { ???? color : deepPink; } a:last-of-type::after { ???? content : "(" attr (href) ")" ; ???? color : deepPink; }

?在線演示

下面的例子是上面代碼的實際效果。

標題

• 列表項一
• 列表項二
• 列表項三
• 列表項四

標題

段落內容...?超鏈接1...?超鏈接2

最后一個段落內容被設置為粗體字...

標題

段落內容...

最后一個段落內容被設置為粗體字...

?瀏覽器支持

所有的現代瀏覽器都支持:last-of-type偽類選擇器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。

總結

以上是生活随笔為你收集整理的:last-of-type | CSS属性参考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。