zoukankan      html  css  js  c++  java
  • 动画中的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
  • 相关阅读:
    POJ 1251 Jungle Roads
    1111 Online Map (30 分)
    1122 Hamiltonian Cycle (25 分)
    POJ 2560 Freckles
    1087 All Roads Lead to Rome (30 分)
    1072 Gas Station (30 分)
    1018 Public Bike Management (30 分)
    1030 Travel Plan (30 分)
    22. bootstrap组件#巨幕和旋转图标
    3. Spring配置文件
  • 原文地址:https://www.cnblogs.com/shuiyi/p/4665729.html
Copyright © 2011-2022 走看看