html - CSS:如何遍历嵌套的跨度标记树并选择每个跨度并为每个跨度分配一个单独的值？

Question

我正在进行 CSS 排版实验。 http://codepen.io/vennsoh/pen/pbdyt

我正在利用“em”单元级联问题。 所以在我的代码中，您会看到我的 HTML 有多个嵌套在一起的 span 标签。

前几天我遇到了另一个实验，http://codepen.io/andyhullinger/pen/ipGht 我很想对我的文本应用类似的效果，但是我在使用 SASS 为每个 span 标签生成单独的动画延迟时遇到了问题。下面是我的代码:

@for $i from 1 through 8{
 span:nth-child(#{$i}){
  animation-delay: $i*(0.8s/8);
 }
}

显然，我的 CSS 选择器 span:nth-child 不工作。所有 span 标签都使用 span:nth-child(1) 中定义的动画延迟。所以它们都具有相同的动画延迟而不是不同的。

<span>B
 <span>L
  <span>A</span>
 </span>
</span> 

如何选择“L，赋值”，然后选择“A，赋值”？

---

需要说明的是，这就是我要实现的目标:http://codepen.io/vennsoh/pen/pAsIm我可以编写一些代码来遍历 span 标签的数量并连接我的选择器。但我只是在想是否有一种方法可以通过 CSS 选择器来完成。

Answer 1

好的各位，我已经用编程的方式解决了。这很简单，但我只是认为可能有一些花哨的 CSS 选择器可以为我完成这项工作，而不是依赖 SASS 脚本。 http://codepen.io/vennsoh/pen/pbdyt

这是它的要点:

$char: 8;
$string: " > span";
$store: ".btn-h1 span";

@for $i from 1 through $char{
  #{$store}{
    animation-delay: $i*(0.8s/$char);
  }
  $store: $store + $string;
}