css - 定位父 ul 的第一个子菜单

Question

我需要将 css 定位为父 ul 中的第一级 ul 子菜单。

CSS：

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

..但这当然适用于所有子菜单，当您将鼠标悬停在父列表项上时，我只希望相对于父项的第一个子菜单具有这种特殊样式。

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/