首页 > Web开发 > 详细

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

时间:2015-07-21 23:41:37      阅读:268      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:http://www.cnblogs.com/shuiyi/p/4665729.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!