html - div 上的 Css3 动画

Question

这是一个fiddle其中有一个小的 css3 动画，其中有 2 个 div triggerBox 控制另一个 div animateBox 的动画，它正在工作但是一旦我重写了 html，

<div id="triggerBox"></div>
<div id="animateBox"></div>

到，

<div id="animateBox"></div>
<div id="triggerBox"></div>

它停止工作，任何人都可以帮我找出这种行为的原因吗？

是的，除非不可避免，否则请不要提供任何基于 javascript 的解决方案。

Answer 1

您正在 CSS 中使用 general sibling selector。如果你没看错的话，它只有在 #animatorBox 在 #triggerBox 之后才有效，并且它们必须共享同一个父级。

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

很抱歉，目前没有可用的previous sibling selector。