javascript - jQuery：像...一样对待在jQuery选择中

Question

一个简单的例子让我对 jQuery 中的选择器感到困惑。我有这个 html 代码：

<div class="container">
   <h1>Welcome to my Website </h1>
   <p>First paragraph</p>
   <p>Second paragraph</p>
</div>

如果我想强调第二段，我认为这是正确的方法：

$('p:nth-child(2)').css("background-color","yellow");

但这是不正确的，事实上第一段将被突出显示，即使我只有两个<p>部分并且我将值 2 放入nth-child()函数中。

这里是相关的jsfiddle

如果我删除该<h1>元素，第二段将突出显示。因此，似乎元素被 jQuery 选择器<h1>视为元素。<p>

但是代码：

$('p:nth-child(1)').css("background-color","yellow");

不会突出任何东西。为什么会发生这种情况？

Answer 1

nth-child字面意思是“就地n的孩子”，你正在搜索的是nth-of-type，看看：http
://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/ 所以这个将按您的预期工作：

$('p:nth-of-type(2)').css("background-color","yellow");

JSFiddle：http: //jsfiddle.net/t2rn7/

Answer 2

:nth-child是关于父母的，所以在你的第一个例子中<p>，实际上是第二个孩子。如果你想让它成为第二个p，你应该使用:nth-of-type