jquery - 第 n 个 child 选择了错误的元素

Question

对于这个特定的站点，当我通过 CSS 或 jQuery 使用 nth-child 时，“nth-child”选择器捕获了错误的元素。我在我调用的选择器之前得到一个 child :

.home article:nth-child(3) {} //captures 2nd child

这好像是在抓老二。如果我尝试:

.home article:nth-child(1) {} //captures nothing

这不捕获任何元素。在 jQuery 中，它显示为一个空数组。这是我正在开发的开发站点。谢谢。

http://heilbrice.designliftoff.com/

Answer 1

在您的站点中，您有一个 clearfix div，它是您容器中其父元素的第一个子元素，因此您的第一篇 article 实际上是 第二 child ，不是第一个:

<div class="row-main clearfix">
    <div class="clearfix"></div>  <!-- .row-main.clearfix > :nth-child(1) -->

    <article id="post-" class=""> <!-- .row-main.clearfix > :nth-child(2) -->

在 CSS 中，您可以使用 :nth-of-type() 代替到达第三个 article 元素:

/* Select the 3rd article in its parent within .home */
.home article:nth-of-type(3) {}

奇怪的是，jQuery does not support :nth-of-type() ，因此对于跨浏览器解决方案，您必须选择 :eq()使用从零开始的索引:

// Select the 3rd article within .home
$('.home article:eq(2)')