nth-child选择了错误的元素

Question

对于这个特定的站点,当我通过CSS或jQuery使用nth-child时,'nth-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是容器中其父元素的第一个子元素,因此您的第一个孩子实际上是第二个孩子,而不是第一个孩子:

<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不支持:nth-of-type(),因此对于跨浏览器解决方案,您必须选择使用:eq()从零开始的索引:

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