对于这个特定的站点,当我通过 CSS 或 jQuery 使用 nth-child 时,“nth-child”选择器捕获了错误的元素。我在调用的选择器之前有一个 child :
.home article:nth-child(3) {} //captures 2nd child
这似乎是在捕获第二个 child 。如果我尝试:
.home article:nth-child(1) {} //captures nothing
这不会捕获任何元素。在 jQuery 中,它显示为一个空数组。这是我正在开发的开发网站。谢谢。
最佳答案
在您的网站中,您有一个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)')
关于jquery - 第 n 个子元素选择了错误的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11633646/