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

【问题标题】：CSS: How do I go through a nested span tag tree and select each span and assign a separate value to each?CSS：如何遍历嵌套的跨度标记树并选择每个跨度并为每个跨度分配一个单独的值？
【发布时间】：2014-02-09 03:21:30
【问题描述】：

我正在做一个 CSS 排版实验。 http://codepen.io/vennsoh/pen/pbdyt

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

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

@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 我可以编写一些代码来循环遍历跨度标签的数量并连接我的选择器。但我只是在想是否有办法通过 CSS 选择器来完成。

【问题讨论】：

我无法让简单的 CSS 样式与 span-in-a-span 格式一起使用。但是如果你有三个独立的跨度，它就可以工作。你真的需要跨度吗？
是的，我需要知道是否有办法做到这一点。不只是为了这个实验，只是一般来说，有没有可能用 CSS 解决这个问题。
我得到了基本的样式，将它放在一个 div 中并使用 div>span 进行样式等。这是小提琴 -jsfiddle.net/qcscf/1 - 可能需要对循环进行一些蛮力编程。明天我会做更多的工作。

标签： html css sass

【解决方案1】：

尝试在您的第一个示例中使用 css (http://codepen.io/vennsoh/pen/pbdyt)

.btn-h1{
  @include text-shadow(0 0 0 black, 0 0 1px black, 0 1px 2px hsla(0, 0%, 0%, .5));
  font-size: 2em;
  color: transparent;
}

.btn-h1 > span > span > span{
  font-size: 1.1em;
  animation:btn_ghost 0.8s ease-in-out infinite alternate;
  @include text-shadow(0 0 0 black, 0 0 1px black, 0 1px 2px hsla(0, 0%, 0%, .5));
  font-size: 1em;
  color: transparent;
}

.btn-h1 > span > span{
  @include text-shadow(0 0 0 red, 0 0 1px red, 0 1px 2px hsla(0, 0%, 0%, .5));
  font-size: 2em;
  color: transparent;
}

$char: 8;

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

@keyframes btn_ghost{
  100% {text-shadow:30px 0 100px black;}
}

【讨论】：

谢谢，但您自己尝试过以下 CSS。它不起作用。
我已经更新了第二条规则，它可能会有所帮助 .btn-h1 > span > span > span,.btn-h1 > span{ font-size: 1.1em;动画：btn_ghost 0.8s ease-in-out 无限交替； @include text-shadow(0 0 0 black, 0 0 1px black, 0 1px 2px hsla(0, 0%, 0%, .5));字体大小：1em；颜色：透明； }
谢谢，但我认为您误解了这个问题。这就是我要实现的目标。 codepen.io/vennsoh/pen/pAsIm如果你有更好的写法，重构代码，请告诉我。

【解决方案2】：

好的，伙计们，我已经通过编程方式解决了这个问题。这很简单，但我只是认为可能有一些花哨的 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;
}

【讨论】：

感谢提示，将修改。