今天在做一个项目,用zepto给元素增加一个class,class里面有transform的效果。开始的时候,元素的样式是用id选择器写的,但是增加class之后,发现动画效果出不来,当时头好晕没想出来为啥,结果回家后用简单的代码打一遍,发现原来是个很简单的问题&hell ...
今天在做一个项目,用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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:动画中的id与class使用css3的优先级问题
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。