今天在做一个项目，用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>