css：nth-​​childはリストアイテムをランダムにスキップします

Question

私は数日のうちに自分で問題を解決しようとした後、ここに投稿しています。リスト項目にスプライトからの画像を表示するdivを含むいくつかの項目が含まれている順序のないリストがあります。ここで

はhtmlです：

<ul class="upperList clearfix"> 
      <li> 
       <h3>Kit détecteur extérieur images</h3> 
       <p></p> 
       <div class="extrasLiBg"></div> 
       <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing 
       elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
       aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
       laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
       in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
       qui officia deserunt mollit anim id est laborum.</p> 
      </li> 
      <li> 
       <h3>Bouton anti hold-up avec capture d'images</h3> 
       <div class="extrasLiBg"></div> 
      </li> 
      <li> 
       <h3>Pendentif Verisure [me]</h3> 
       <div class="extrasLiBg"></div> 
      </li> 
     </ul> 

そして、ここでCSSです：

は

.extrasLiBg { 
    width:100px; 
    height:100px; 
    position:absolute; 
    bottom:0; 
    right:0; 
    overflow:hidden; 
    background:url('images/extras-sprite.jpg') no-repeat; 
} 

.extras .upperList li:nth-child(2) .extrasLiBg {background-position:-100px 0;} 
.extras .upperlist li:nth-child(3) .extrasLiBg {background-position:-200px 0;} 

私の問題は、最後のリスト項目内のdiv要素は、何らかの形で背景画像をシフトすることを拒否されているので、スプライトの最初の左上の画像を表示します。 それは私のナットを運転しています、ページにも他のリストがあり、スプライトの右部分を表示するのに問題はありません...

私はChrome 10 btwを使用していますが、問題はFirefox、Safari、Opera（最新リリース）に残ります。

ありがとうございました。

Answer 1

第3子のセレクタで、.upperlistを.upperListに変更します。