Question

我正在处理网页菜单，我想要 .current-menu-item - 当前项目，以换一种方式。但是此菜单的第一项应该有圆角（左上角，左下角）。我怎么能这样做：第一子元素？感谢。

好的，这是一段代码片段 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中解决这个问题。

Answer 1

编辑回答：

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

这会导致#navHead的第一个li元素具有圆角，如果它具有类'current-menu-item'。我会添加一个注释，原始边框半径设置在'#navHead'而不是任何后续元素。

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

第一个菜单项看起来不同，有：first-child元素

1 个答案: