不加div時
加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>
uj5u.com熱心網友回復：
CSS選擇器優先級問題，看看這個https://www.cnblogs.com/yugege/p/9918232.html
你的 .outer div 是一個類選擇器 加 一個標簽選擇器， 優先級權值為 0,0,1,1
.box5 只有一個類選擇器， 優先級權值為 0,0,1,0
.outer div 優先級權值要高于 .box5
.box5 中的animation-delay:.5s; 會被 .outer div 中的 animation:ball 1s forwards linear infinite alternate; 覆寫。
如果是 div.box5 優先級權值就與 .outer div 相同了。
相同的優先級 寫在前面的樣式會被后面的覆寫。
uj5u.com熱心網友回復：
懂了，謝謝大佬
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/13740.html
標籤：HTML(CSS)