Question

我试图将精灵图片添加到wordpress / ubermenu中的菜单项。自定义类：

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

适用于

ID =＆＃34;菜单项-4＆＃34;

它应仅影响第一个图像元素，而是将样式应用于大多数图像menu-item-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选择器会选择所有img-tag，它们直接是＃menu-item-4中a-tag的子代。

试试这个：

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

最好将类添加到a-tags或img-tags

Answer 2

删除最后的*:first-child。您的 > 选择器正在搜索锚点中显示的第一个图片，而*:first-child选择器会混淆其路径，因为此图片没有子元素。

您的选择器应该是这样的： #menu-item-4.sprite.icon-image a > img

这实际上意味着 - 只查找并应用于您遇到的第一张图片。

我建议您在锚点上添加一个类，然后简单地解决这个问题。

e.g。

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

在li标签中选择特定的img标签

2 个答案: