liタグ内の特定のimgタグを選択してください

Question

wordpress/ubermenuのメニュー項目にスプライトイメージを追加しようとしています。 は、カスタムクラス：

#menu-item-4.sprite.icon-image a > img:first-child 
    { background-position: -161px 0px!important; width: 22px; height: 22px;} 

が

ID = "メニュー項目-4"

に適用されることではなく、スタイルが適用され、最初の画像要素に影響を与える必要がありますほとんどの画像メニュー項目-4に。 この特定の画像を選択するにはどうすればよいですか？

<ul class="menu-id-1"> 
    <li id="menu-item-2"> 
     <ul class="submenu-id-3"> 
     <li id="menu-item-4" class="sprite icon-image"> <-- Costum CSS Class added here 
      <a href=""> 
      <img> <-- CSS to select this element only 
      <span></span> 
      <span></span> 
      </a> 
      <ul class="menu-submenu-id-5"> 
      <li id="menu-item-6"> 
       <a href=""> 
       <img> <-- This element will have other icon 
       <span></span> 
       <span></span> 
       </a> 
      </li> 
      <li d="menu-item-7"> 
       <a href=""> 
       <img> 
       <span></span> 
       <span></span> 
       </a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
</ul> 

Answer 1

あなたのCSSセレクタが直接あなたの＃メニュー項目-4内のA-タグの子であるすべてのimgタグを選択します。

これを試してみてください。

#menu-item-4 > a img 
    { background-position: -161px 0px!important; width: 22px; height: 22px;} 

そのおそらくより良いが、タグやIMGタグ

Answer 2

最後に*:first-childを削除します。 >セレクタはアンカー内に表示される最初の画像を検索しており、この画像の子要素がないため、*:first-childセレクタはパスを混同しています。

あなたのセレクタは、このようなものでなければなりません： #menu-item-4.sprite.icon-image a > img

これは文字通り意味 - 見つけるとにのみ適用されます、あなたが出くわす最初の画像。

あなたのアンカーにクラスを追加し、それに対処することをお勧めします。

#menu-item-4.sprite.icon-image .anchor-class > img