Html 第一个菜单项外观不同，带有：第一个子元素

我正在处理网页菜单，我想。当前菜单项-当前项，看起来不同。但是这个菜单的第一项应该有圆角（左上角，左下角）。如何使用：first-child元素来实现这一点？谢谢

好的，这是一段代码片段
HTML:

<ul id="navHead">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>

最后，wordpress在点击一个项目后创建一个新类-

当前菜单项

。它被添加到当前列表项的类规范中。因为navHead是四舍五入的，在单击第一个项目后，navHead的左侧变为非四舍五入，所以我想通过以下代码来解决这个问题：

#navHead li:first-child .current-menu-item a{      
    border-top-left-radius: 5px;      
    border-bottom-left-radius: 5px;  
}

但什么也没发生。我必须以一种风格使用

。当前菜单项

和

li:first child

。HTML代码由wordpress调整，所以我只能用CSS解决这个问题。

编辑答案：

#navHead li.current-menu-item:first-child{
    border-top-left-radius: 5px;      
    border-bottom-left-radius: 5px;
}

这将导致#navHead的第一个li元素具有圆角，如果它具有类“current menu item”。不过，我要补充一点，即原始边界半径设置在“#navHead”上，而不是任何后续元素

---

有关选择器语法和构造的一些参考阅读：

如果您在jsfiddle.com上设置一个示例，则可能会有所帮助。至少我们需要查看HTML。请发布标记和一些CSS，以了解您的样式设置。我想看看

#navHead li.当前菜单项a

和

#navHead li.当前菜单项

和

#navHead li a

和

#navHead li

样式。只是一个补充说明，我假设您的HTML具有某种结构。请发布HTML以获得更好的答案。是的，没错，但我需要此边框半径仅在当前菜单项（Wordpress创建的类）中，而不是在第一个列表项（当该类未在该列表项上创建时）发布HTML，人们将能够给您准确的响应。此方法不起作用，但是我尝试了

#navHead li{overflow:hidden；}

，这在我的案例中很有效。但是，如果我在navHead的第一个子元素中创建了一些podmenu，这将是一个糟糕的解决方案。这将表明.current菜单项类被指定为锚定标记，而不是li元素。。

#navHead li.current-menu-item:first-child{
    border-top-left-radius: 5px;      
    border-bottom-left-radius: 5px;
}