这个选择器是什么意思＃black_wheel.anim-wheel？

我读了＃black_wheel.anim-wheel选择了所有具有轮子级别的＃black_wheel。但在下面的例子中，我只有#black_wheel。我对这个选择器有点混淆。这是我的例子这个选择器是什么意思＃black_wheel.anim-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>

来源

2013-10-08 Shiva Mohbati

由于ID都是唯一的，什么'＃black_wheel.anim，wheel' “简单的英语”的意思是“ID为'black_wheel'的元素，但只有当它具有'anim-wheel'类时 –

我相信问题更多地沿着”为什么这个CSS选择器甚至在使用？ “如果这就是你要求的，请看下面的答案。 –

#是给予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或的“动画轮”类，即选择将无法选择它。该元素仅在id和class都存在时才被选中。

查看W3 CSS Selectors specification了解更多信息。

在你的榜样，你有该元素的下面的标记与id：

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

在这种状态下，你的CSS选择器将不能够针对这个元素作为“动画轮”级不存在。然而，在$(document).ready()，你有以下的JavaScript它不会将该类添加到该元素：要在此展开，你有以下的JavaScript：

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

发生这种情况时，该CSS选择器会踢成行动。

来源

2013-10-08 21:25:36

它看起来好像#black_wheel元素被给予时通过jQuery在页面加载由以下行证明的.anim-wheel类：

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

来源

2013-10-08 21:26:24

这个选择器是什么意思＃black_wheel.anim-wheel？

回答

相关问题