這個選擇器是什麼意思＃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？

回答

相關問題