试图让最后一个孩子进入CSS，但它不起作用

Question

我很好奇为什么：

$("div.title").last();

不会返回与css代码相同的项目：

$("div.title:nth-child(0)")或$("div.title:last-child")

我试图在css中引用它，但似乎它似乎没有这样做。

html看起来像：

<div>
  <div class="title"></div>
  <div></div>
  <div class="title"></div>
  <div></div>
</div>

Answer 1

CSS中的

:last-child只会选择元素，如果它是父元素的最后一个子元素，无论元素，类或任何其他选择器。

在jQuery中.last()实际上会过滤你在jQuery选择器中获得的元素集合。

Answer 2

:last-child仅适用于父级的最后一个子级（类似于jQuery .last()）

但是，CSS :last-of-type选择最后一次出现的模式，这可能就是你想要做的事情：

div.title:last-of-type将选择与jQuery $("div.title").last();

相同的元素

（注意：这两个选择器在IE8或更低版本中默认不起作用）

Answer 3

原因是在CSS中，:last-child指的是父项的最后一个子项。所以.. ..

<div>
  <div class="title"></div>
  <div></div>
  <div class="title"></div>
  <div></div>
</div>

div.title:last-child不会选择任何内容，因为div.title的父级的最后一个孩子是div。

:nth-child(n)使用相同的逻辑。此处n指的是从1开始计数的父项的每个子项的索引。

jQuery的{p> last()是不同的。它选择已提供的最后一个jQuery选择器。因此，$("div.title").last();将选择整个代码中的最后一个div.title。