你的位置:首页 > 网页设计

[网页设计]动画中的id与class使用css3的优先级问题

今天在做一个项目,用zepto给元素增加一个class,class里面有transform的效果。开始的时候,元素的样式是用id选择器写的,但是增加class之后,发现动画效果出不来,当时头好晕没想出来为啥,结果回家后用简单的代码打一遍,发现原来是个很简单的问题……

动画出不来的原因就是:id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式,导致了动画出不来。

简单代码测试:

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    #div1 {      width: 100px;      height: 100px;      background: red;      -webkit-transition: all 1s;    }    .div2 {      width: 100px;      height: 100px;      background: blue;      -webkit-transition: all 1s;    }    .animation{    width: 200px;      height: 200px;    }  </style></head><body><div id="div1"></div><div class="div2"></div><script>  var oDiv1=document.getElementById("div1");  var oDiv2=document.getElementsByClassName("div2")[0];  oDiv1.onclick=function(){    this.className="animation";  }  oDiv2.onclick=function(){    this.className="div2 animation";  }</script></body></html>

View Code