即使是嵌套的情况下也可以依次选择子元素

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>

预期结果：我正在尝试使用CSS3animation和animationdelay来创建良好的效果，所有列表元素都快速淡入，并有轻微的延迟。 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 选择器来指定要选择的子项。请参阅有关 children

 方法

的 JQuery 文档以及 JQuery 选择器 的文档。