:last-of-type CSS 伪类 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素,也包括子元素的最后一个子元素并以此类推。
指定其父级的最后一个p元素的背景色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(cainiaoplus.com)</title> <style> p em:last-of-type { color: green; } </style> </head> <body> <p> <em>我没有颜色 :(</em><br> <strong>我没有颜色 :(</strong><br> <em>我有颜色 :D</em><br> <strong>我也没有颜色 :(</strong><br> </p> <p> <em>我没有颜色 :(</em><br> <span><em>我有颜色!</em></span><br> <strong>我没有颜色 :(</strong><br> <em>我有颜色 :D</em><br> <span> <em>我在子元素里,但没有颜色!</em><br> <span style="text-decoration:line-through;"> 我没有颜色 </span><br> <em>我却有颜色!</em><br> </span><br> <strong>我也没有颜色 :(</strong> </p> </body> </html>测试看看 ‹/›
element:last-of-type { style properties }
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
提示: 和:nth-last-of-type(1)是一个意思。
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器 | |||||
---|---|---|---|---|---|
:last-of-type | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |