星空网 > 软件开发 > 网页设计

动画中的id与class使用css3的优先级问题

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

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

简单代码测试:

动画中的id与class使用css3的优先级问题动画中的id与class使用css3的优先级问题
<!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

 




原标题:动画中的id与class使用css3的优先级问题

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流