我注意到
$( 'filter:last' )$( 'filter:last-child' )我尝试了 jQuery 文档，但很难理解
:last显然，
:last:last-child.last()$( 'filter:last' ):last它们非常相似。不同的是，如果你有类似的东西
<div>
<p>hi</p>
<p>bye</p>
</div>
<div>
<p>hi</p>
<p>bye</p>
</div>
$('p:last-child')<p>bye</p>$('p:last')$('p').last():last:last:last 选择器仅匹配单个元素，:last-child 可以匹配多个元素：每个父元素一个。
请参阅下面的示例以获得更好的说明 -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>last-child demo</title>
<style>
span.solast {
text-decoration: line-through;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
<table>
<tr><td>First Row</td></tr>
<tr><td>Middle Row</td></tr>
<tr><td>Last Row</td></tr>
</table>
<table>
<tr><td>Second Table First Row</td></tr>
<tr><td>Second Table Middle Row</td></tr>
<tr><td>Second Table Last Row</td></tr>
</table>
<script>
$( "div span:last-child" )
.css({ color:"red", fontSize:"80%" })
.hover(function() {
$( this ).addClass( "solast" );
}, function() {
$( this ).removeClass( "solast" );
});
$( "table tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder"
});
</script>
</body>
</html>
您可以看到在上面的代码中：last 选择器仅将一个 tr 的背景颜色更改为黄色，而不是两个 tr，这意味着 :last 仅选择单个元素。而 :last-child 将选择每个元素的最后一个子元素。
这是针对 CSS 的：
使用 :last-child 与 :last-of-type 非常相似，但有一个关键区别：它不太具体。
:last-child 只会尝试匹配父元素的最后一个子元素，而 :last-of-type 将匹配指定元素的最后一次出现，即使它不是最后出现的HTML。