如何让css过渡效果适用于所有的孩子？

Question

什么即时试图做的是建立一个全球性类

.animate { 
    -webkit-transition:0.2s; 
    -moz-transition:0.2s; 
    -o-transition:0.2s; 
    transition:0.2s; 
} 

并把它作为

<div class="element animate"> 
<div class="child"></div> 
</div> 

然而，每当我试图

.element:hover .child{ 
    background:#000; 
} 

它不适用的过渡。有没有办法做到这一点？或者我只需要将.animate应用于每个子元素？

此外，关于我试图做什么，它是实用的？

谢谢！

Answer 1

相反，它适用于每一个孩子的，只是使用直接子选择器（>）：

.animate > * { 

这样做的好处是，你不必在child类适用于每一个儿童。 （你也可以保持孩子上课，做.child {，但是这正是你试图避免的。）

或者，如果你想动画每一个孩子，（即<div class='animate'><div><div>This one</div></div></div>），无论其深度，做到：

.animate * { 

Answer 2

试试这个，

.animate> * { 
    -webkit-transition:0.2s; 
    -moz-transition:0.2s; 
    -o-transition:0.2s; 
    transition:0.2s; 
} 

如果你想它会选择.animate

所有直接子选择所有的孩子.child然后使用

.animate * { 
    -webkit-transition:0.2s; 
    -moz-transition:0.2s; 
    -o-transition:0.2s; 
    transition:0.2s; 
}