目标父亲ul的第一个子菜单

Question

我需要将css作为父级ul中第一级ul子菜单的目标。

CSS：

#menu li:hover > ul.sub_menu { ...some styles }

..但是对于所有sub_menu来说都是这样做的，当你将鼠标悬停在父列表项上时，我只希望第一个sub_menu相对于父级的特定样式。

HTML：

<ul id="menu">
    <li>Item 
      <ul class="sub_menu"><!-- target only this one -->
       <li>Item
         <ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
       </li>
      </ul>
    </li>
    <li>Item 
      <ul class="sub_menu"><!-- target only this one -->
       <li>Item
         <ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
       </li>
      </ul>
    </li>
</ul>

感谢您的反馈......

Answer 1

您可以使用:first-child选择器：

#menu > li:first-child > ul.sub_menu {
    color: red;
}

然后使用后代选择器还原其他元素的更改：

#menu > li:first-child > ul.sub_menu ul {
    color: black;
}

演示：http://jsfiddle.net/6y4Sb/