Fiddle Demo

Question

我的Wordpress视图中的一个片段：

<div id="menu">
  <ul id="menu-main-navigation">
    <li id="menu-item-646" class="current-menu-item"><a href="#" class="">MAIN MENU ITEM<span class="downarrowclass"></span></a>
      <ul class="sub-menu">
        <li id="menu-item-661" class="menu-item menu-item-661"><a href="#">SUB MENU ITEM</a></li>
      </ul>
   </li>
 </ul>

使用以下CSS代码段设置背景：

#menu li.current-menu item a {
background: url(images/menu-tip.png) center top no-repeat;
}

问题是这个背景也出现在每个子菜单项上。我应该如何将我的CSS选择器更改为仅定位主要项目？

以下答案效果很好，谢谢！

Answer 1

您可以使用 direct child selector

#menu li.current-menu-item > a {
background: url(http://lsst.astro.washington.edu/intro/imsim/images/ImageSimNoBackgroundSmall.png) center top no-repeat;
}

Fiddle Demo

Answer 2

怎么样：

#menu li.current-menu-item > a {
   background: url(images/menu-tip.png) center top no-repeat;
}

>是direct child selector

＆gt;组合器分离两个选择器并仅匹配那些选择器第二个选择器匹配的元素是直接子元素第一个匹配的元素。相比之下，当两个选择器是结合后代选择器，组合选择器表达式匹配第二个选择器匹配的元素哪个存在与第一个选择器匹配的祖先元素，不管＆＃34;跳数＆＃34; DOM。

所有带有class =＆＃34;子菜单＆＃34;的列表获得相同的背景，需要帮助删除

2 个答案:

Fiddle Demo