0

我读到#black_wheel.anim-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>
4

2 回答 2

2

#是赋予 HTMLid属性.的前缀，是赋予 HTML 属性的前缀class。

#id.class选择具有该 ID 和类的元素。在您的情况下，选择带有和`class="anim-wheel"#black_wheel.anim-wheel的元素。id="black_wheel" 

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

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

查看W3 CSS 选择器规范以获取更多信息。

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

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

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

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

发生这种情况时，该 CSS 选择器将开始起作用。

于 2013-10-08T21:25:36.990 回答
2

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

$(".wheel").addClass("anim-wheel");
于 2013-10-08T21:26:24.647 回答