第 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 布局时再次发生此类问题。

Answer 2

将所有

字母包装在一个额外的div中nth-child因为将查看父级中的所有子级。您的父div在孩提时代仍然具有svg元素。所以nth-child(10)实际上是第 9 个字母，nth-child(1)针对您的svg。

2种可能的解决方案：

• 添加 nth-child(11) 以取第 10 个字母并删除nth-child(1)
• 将字母包装在另一个div中。

演示

https://jsfiddle.net/hj15se3t/2/