Question

对于这个特定的网站，当我通过CSS或jQuery使用nth-child时，“第n个孩子”＃选择器正在捕获错误的元素。我在选择之前给一个孩子打电话：

.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 does not support :nth-of-type()，因此对于跨浏览器解决方案，您必须使用基于零的索引选择:eq()：

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

nth-child选择了错误的元素

1 个答案: