html - 第 n 个子动画停止工作

Question

为你准备了一个周末装腔作势的人。

我一直在开发一个新站点，右上角有一些淡入淡出的小动画。

它们都在不同的跨度(字母)中，我在 css 中为每个字母使用 .letter:nth-child(number)。

一切都很好，但是在添加了一些点点滴滴之后，突然间，第 10 个字母停止工作了。

我像看布偶一样盯着代码，我重新编写了 css 并遍历了每一行，但我就是不明白为什么它停止工作了。

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

infinite 1000ms;
        animation: fade 4s infinite 

1000ms;
    }

我已经将它升级到 jsfiddle，它在那里做完全相同的事情。

https://jsfiddle.net/hj15se3t/1/

有人知道是什么原因造成的吗？

感谢您一如既往的抽出宝贵时间并提供任何帮助。像往常一样，它可能会变成愚蠢的东西。我只是被难住了!

Answer 1

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