第n个孩子选择了错误的元素 [英] nth-child selecting wrong element

问题描述

对于这个特定的网站，当我通过CSS或jQuery使用nth-child时，"nth-child"选择器捕获了错误的元素.我在要叫的选择器之前生了一个孩子:

For this particular site, when I utilize nth-child via CSS or jQuery, the 'nth-child' selector is capturing the wrong element. I'm getting one child before the selector that I'm calling:

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

这似乎是在捕获第二个孩子.如果我尝试:

This seems to be capturing the second child instead. If I attempt:

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

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

This captures no elements. In jQuery, it shows up as an empty array. Here's the dev site that I'm working on. Thank you.

http://heilbrice.designliftoff.com/

推荐答案

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

In your site, you have a clearfix div that's the first child of its parent element within your container, so your first article is really the second child, not the first:

<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元素:

In CSS, you can use :nth-of-type() instead to reach the third article element:

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

奇怪的是， jQuery不支持:nth-of-type() ，因此一个跨浏览器解决方案，您必须使用 :eq() (从零开始的索引)进行选择:

Oddly enough, jQuery does not support :nth-of-type(), so for a cross-browser solution you have to opt with :eq() with a zero-based index:

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

这篇关于第n个孩子选择了错误的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！