html - 第一个菜单项看起来不同，:first-child element

Question

我正在处理网页菜单，我希望.current-menu-item - 当前元素看起来不同。但是这个菜单的第一项应该有圆 Angular (左上角，左下角)。我该怎么做，使用 :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是圆 Angular 的，点击第一项后，navHead的左边变成非圆 Angular ，所以我想通过这段代码解决这个问题:

#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中解决这个问题。

Answer 1

编辑后的答案:

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

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

选择器语法和构造的一些引用阅读:w3c spec