Question

为你度过了一个周末的假装。</ p>

我一直在创建一个新网站，并且在一些字母的右上方有一个小动画，逐渐淡出。

他们都是单独的跨度（字母），我正在使用.letter：nth-child（number）为css中的每一个。

这一切都很好但是在添加了几个位和突然之后，突然间，第10个字母已停止工作。

我正在盯着像muppet这样的代码我已经重写了css并经历了每一行，但我无法弄清楚为什么它已停止工作。

  .letter:nth-child(10) {
        -webkit-animation: fade 4s 

infinite 1000ms;
        animation: fade 4s infinite 

1000ms;
    }

我把它提升到了jsfiddle，它在那里做了完全相同的事情。

任何人都知道造成这种情况的原因是什么？

感谢您一如既往的时间和任何帮助。像往常一样，它可能会变成愚蠢的东西。我很难过！

Answer 1

你遇到的问题是在字母之前有一个额外的元素。所以发生的事情是:nth-child(1)定位<div id="pic">。您可以为:nth-child(11)添加新规则，或者将所有字母包装在自己的容器中，以避免将来再次发生任何问题，如果您需要更改DOM的布局。

Answer 2

将所有字母包装在额外的div中，因为nth-child将查看父级中的所有子项。您的父级div仍然具有svg元素作为孩子。因此，nth-child(10)实际上是您的nth-child(1)的第9个字母和svg目标。

可能有两种解决方案：

<强>样本