:last-child

如果某个元素是父元素中的最后一个元素,那么他就会被选中。

注意,:last 只匹配一个元素,就是最后一个元素,而 :last-child 则能匹配多个元素:即每个父元素中的最后一个。

示例:

在每个匹配的 div 中查找最后一个 span ,并加上 CSS 以及增加鼠标悬停效果。

<!DOCTYPE html>
<html>
<head>
<style>
  span.solast { text-decoration:line-through; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon,</span>

    <span>Sam</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>

    <span>Ralph,</span>
    <span>David</span>
  </div>

<script>


    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("solast");
            }, function () {
              $(this).removeClass("solast");
            });



</script>
</body>
</html>
演示: