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;
}

Answer 2

尝试将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：如何浏览嵌套的span标记树并选择每个span并为每个span分配一个单独的值？

2 个答案: