jQuery中两个连续的伪选择器不起作用答案

【问题标题】：Two consecutive pseudo selectors in jQuery don't workjQuery中两个连续的伪选择器不起作用
【发布时间】：2014-12-19 09:58:05
【问题描述】：

我在使用 jQuery 选择元素时遇到了一些问题。

我的 HTML 代码归结为：

<body>
  <p>Dont mind me, sir</p>
  <p>Select me please!</p>
  <p class="fabulous">So fab</p>
</body>

使用一些 jQuery：

$(document).ready(function(){
  $('p:not(.fabulous):last-child').css({'background':'yellow'});
});

使用选择器$('p:not(.fabulous):last-child')，我试图选择其父级（在本例中为主体）的最后一个元素，该元素没有“精彩”类。使用$('p:not(.fabulous)')，我选择了body 的所有非出色子元素，但为什么我不能选择剩余p 元素的最后一个子元素？我非常感谢有关 :last-child 和 :not( 的行为的答案，或者我误解的任何选择器。

谢谢！

【问题讨论】：

尝试使用:last 而不是:last-child。
:last 不是 jQuery 扩展吗？因为我想在没有扩展的情况下这样做......
“扩展”有什么问题？你那么担心 DOM 性能吗？
P.S. :not 被实现为“jQuery 扩展”。检查jQuery.expr[':']。

标签： jquery jquery-selectors css-selectors

【解决方案1】：

:last-child 选择作为其父项的最后一个子项的所有元素。 <body> 的最后一个 (<p>) 孩子是 <p class="fabulous">。

因此，当您执行p:not(.fabulous):last-child 时，您要求的是<p>，它都是其父级的最后一个子级并且没有该类fabulous。不存在这样的元素。

在这种情况下，您需要使用 $('p:not(.fabulous):last')。

【讨论】：

选择这个作为最佳答案是因为它的解释 - 谢谢！

【解决方案2】：

改用$('p:not(.fabulous):last').css({'background-color':'yellow'}); 或$('p:not(.fabulous)').last().css({'background-color':'yellow'});

【讨论】：