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