如何讓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; 
}