0

我正在处理网页菜单，我想.current-menu-item - 当前项目，看起来不同。但是这个菜单的第一项应该有圆角（左上角，左下角）。我该怎么做，使用 :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>

CSS：

#navHead{
    border-radius: 5px;
    background: #454545 url('images/gradient.png') top left repeat-x;
}

#navHead li{
    float: left;
}

#navHead li a{
    display: block;
}

最后，wordpress 在单击一个项目后创建一个新类 - current-menu-item。它被添加到当前列表项的类规范中。而且因为navHead是圆角的，点击第一项后，navHead的左边就变成了非圆角的，所以我想通过这段代码来解决这个问题： 

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

但什么也没发生。我必须以一种风格使用.current-menu-item和li:first-child。HTML 代码是由 wordpress 调整的，所以我只能在 CSS 中解决这个问题。

4

1 回答 1

0

编辑答案： 

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

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

选择器语法和构造的一些参考读物：w3c 规范

于 2012-09-05T15:38:16.683 回答