请问为什么css动画设置延迟时选择器不加div无效果
在延迟样式，如果选择器不加div几个圆就会一齐发生变化，没有延迟效果
加div
<!donctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
*{
margin:0;
padding:0;
}
.outer{
height:500px;
border-bottom:10px black solid;
overflow:hidden;
}
.outer div{
float:left;
height:100px;
text-align:center;
font-size:50px;
margin-right:10px;
width:100px;
border-radius:50%;
line-height:100px;
animation:ball 1s forwards linear infinite alternate;
}
div.box1{
background-color:#1af;
animation-delay:.1s;
}
div.box2{
background-color:#1af;
animation-delay: .2s;
}
div.box3{
background-color:#1af;
animation-delay: .3s;
}
div.box4{
background-color:#1af;
animation-delay: .4s;
}
div.box5{
background-color:#1af;
animation-delay:.5s;
}
div.box6{
background-color:#1af;
animation-delay:.6s;
}
div.box7{
background-color:#1af;
animation-delay:.7s;
}
div.box8{
background-color:#1af;
animation-delay:.8s;
}
div.box9{
background-color:#1af;
animation-delay:.9s;
}
@keyframes ball{
from{
margin-top:0;
}
to{
margin-top:400px;
}
}
</style>
</head>
<div class="outer">
<div class="box1">!</div>
<div class="box2">!</div>
<div class="box3">!</div>
<div class="box4">!</div>
<div class="box5">!</div>
<div class="box6">！</div>
<div class="box7">!</div>
<div class="box8">!</div>
<div class="box9">！</div>
</div>
</body>
</html>
问题原因
.outer div 这个css的优先级大于.box1 .box2 .box3 ......., 其中的动画效果animation覆盖了 animation-delay，
当加上了div之后div.box1的css优先级大.outer div，而animation-delay修改范围小于animation，所以成功修改了动画的部分属性，没有覆盖其余属性。
css优先级查看
css优先级可以在浏览器控制台中看到。
这个是没有加div的，可以看到他的位置在.outer div之下，animation-delay被覆盖
这个是加了的，可以看到优先级发生了变化， div.box 在上
