CSS3 :last-of-type 选择器

由网友 大卫 发布 阅读 6

CSS3 :last-of-type 选择器

:last-of-type CSS 伪类 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素,也包括子元素的最后一个子元素并以此类推。

完整CSS选择器参考手册

在线示例

指定其父级的最后一个p元素的背景色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>大卫编程网(div.cn)</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-type4.09.03.53.29.6

完整CSS选择器参考手册

CSS :first CSS3 [attribute$=value] 选择器