Question

给出了什么：我有一个由外部应用程序生成的HTML，不幸的是无法更改。它基本上包括带有很多子元素的容器div，其中一些是嵌套的，如下所示：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div>
     <div class="child"></div>
     <div class="child"></div>
  </div>
  <div class="child"></div>
  <div class="child"></div>
 </div>

预期结果：我正在尝试使用CSS3 动画和动画延迟来创建一个很好的效果，所有列表元素都会快速淡入一个接一个的轻微延迟。 CSS就像这样：

.container .child {
  animation: FadeIn 1s ease-out;
}
.container .child:nth-child(1){
  animation-delay: 0.2s
}
.container .child:nth-child(2){
  animation-delay: 0.4s
}
.container .child:nth-child(3){
  animation-delay: 0.6s
}
.container .child:nth-child( .... ){
  animation-delay: 0.8s
}

问题：正如您所理解的，如果所有元素都直接位于.container DIV中，动画效果很好。但是，只要嵌套了一些div，动画就会出现故障。是否有可能以某种方式一个接一个地选择所有.child元素，尽管它们嵌套在额外的DIV中？

编辑：以避免任何混淆 - 我试图在没有任何JS的情况下实现这一点 - 只是纯粹的CSS方法！

提前致谢。

Answer 1

我相信您要找的是.children()而不是.child()。您还可以使用各种JQuery选择器来指定要选择的子项。请参阅JQuery documentation on the children method和documentation for JQuery Selectors。

即使在嵌套时也要一个接一个地选择子元素

1 个答案: