css - 即使嵌套也一个接一个地选择子元素

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 animation 和 animation delay 来创建所有列表元素快速淡入的良好效果轻微的延迟一个接一个。 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 .