Question

我读到#black_wheel.anim-wheel选择所有带有动画轮类的#black_wheel。但在下面的例子中我只有一个#black_wheel。我对这个选择器有点迷惑。这是我的例子

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Traced Bird Ad</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#logo").addClass("animated");
            $("#gradient").addClass("gradient-anim");
            $(".wheel").addClass("anim-wheel");
        });
    </script>
    <style>
    #outerWrapper {
        width: 1000px;
        margin: 30px auto;
        position: relative;
        -webkit-perspective: 500px;
        -moz-perspective: 500px;
        -o-perspective: 500px;
        perspective: 500px;
        overflow: hidden;
    }
    #logo {
        position: absolute;
        top: 37px;
        left: 39px;
        -webkit-transition: all 3s cubic-bezier(0.950, 0.050, 0.795, 0.035);
        -moz-transition: all 3s cubic-bezier(0.950, 0.050, 0.795, 0.035);
        -o-transition: all 3s cubic-bezier(0.950, 0.050, 0.795, 0.035);
        transition: all 3s cubic-bezier(0.950, 0.050, 0.795, 0.035);
        -webkit-transition-delay: 1s;
        -moz-transition-delay: 1s;
        -o-transition-delay: 1s;
        transition-delay: 1s;
    }
    #swoosh {
        position: absolute;
        left: 0;
        top: 0; 
    }
    #gradient {
        position: absolute;
        left: 1392px;
        top: 34px;  
        -webkit-transition: all .5s ease-in-out;    
        transition: all .5s ease-in-out;
    }
    #gradient.gradient-anim {
        left: 392px;
        top: 34px;  
    }
    #text {
        position: absolute;
        left: 486px;
        top: 178px; 
    }
    #black_wheel {
        position: absolute;
        left: 1434px;
        top: 10px;  
    }
    #red_wheel {
        position: absolute;
        left: 1618px;
        top: 10px;  
    }
    #silver_wheel {
        position: absolute;
        left: 1807px;
        top: 10px;  
    }
    .wheel {
        opacity: 0;
        -webkit-transition-property: left,opacity,-webkit-transform;
        -webkit-transition-duration: 3s,4s,3s;
        -webkit-transition-timing-function: ease,ease,ease-out;
        -webkit-transition-delay: 0s,.5s,0s;    
        -moz-transition-property: left,opacity,-moz-transform;
        -moz-transition-duration: 3s,4s,3s;
        -moz-transition-timing-function: ease,ease,ease-out;
        -moz-transition-delay: 0s,.5s,0s;
        -o-transition-property: left,opacity,-o-transform;
        -o-transition-duration: 3s,4s,3s;
        -o-transition-timing-function: ease,ease,ease-out;
        -o-transition-delay: 0s,.5s,0s;
        transition-property: left,opacity,transform;
        transition-duration: 3s,4s,3s;
        transition-timing-function: ease,ease,ease-out;
        transition-delay: 0s,.5s,0s;
    }
    .animated {
        -webkit-transform: rotateY(-720deg);    
        -moz-transform: rotateY(-720deg);    
        -o-transform: rotateY(-720deg);    
        transform: rotateY(-720deg);    
    }
    #black_wheel.anim-wheel {
        left:434px; 
    }
    #red_wheel.anim-wheel {
        left: 618px;
    }
    #silver_wheel.anim-wheel {
        left: 807px;
    }
    .anim-wheel {
        -webkit-transform: rotate(-1080deg);
        -moz-transform: rotate(-1080deg);
        -o-transform: rotate(-1080deg);
        transform: rotate(-1080deg);
        opacity: 1;
    }
    </style>
    </head>

    <body class="loaded">
    <div id="outerWrapper"><img src="_images/Traced%20Bird%20FMA.png" width="1000" height="260" alt="Traced Bird">
      <div id="logo"><img src="_images/birds.png" width="312" height="198" alt="logo"></div>
      <div id="swoosh"><img src="_images/swoosh.png" width="754" height="227" alt=""></div>
      <div id="gradient"><img src="_images/gradient.png" width="614" height="108" alt=""></div>
      <div id="text"><img src="_images/text.png" width="424" height="59" alt=""></div>
      <div id="black_wheel" class="wheel"><img src="_images/black_wheel.png" width="159" height="159" alt=""></div>
      <div id="red_wheel" class="wheel"><img src="_images/red_wheel.png" width="159" height="159" alt=""></div>
      <div id="silver_wheel" class="wheel"><img src="_images/silver_wheel.png" width="159" height="159" alt=""></div>
    </div>
    </body>
    </html>

Answer 1

#是HTML id属性的前缀，.是HTML class属性的前缀。

#id.class选择两者该ID和类的元素。在您的情况下，#black_wheel.anim-wheel选择id="black_wheel" 和`class =“anim-wheel”的元素。

<element id="black_wheel" class="anim-wheel"></element>

如果元素只有“black_wheel”id 或“anim-wheel”类，那么该选择器将无法选择它。仅当id和class都存在时才会选择该元素。

查看W3 CSS Selectors specification了解详情。

在您的示例中，对于具有id的元素，您有以下标记：

<div id="black_wheel" class="wheel"> ... </div>

在此状态下，您的CSS选择器将无法定位此元素，因为“anim-wheel”类不存在。但是，在$(document).ready()上，您有以下JavaScript将该类添加到该元素：要对此进行扩展，您需要以下JavaScript：

$(".wheel").addClass("anim-wheel");

当发生这种情况时，该CSS选择器将开始行动。

Answer 2

当页面通过jQuery加载时，看起来#black_wheel元素被赋予了.anim-wheel类，如下所示：

$(".wheel").addClass("anim-wheel");

这个选择器意味着什么＃black_wheel.anim-wheel？

2 个答案: