圆角菜单 - 当前页面项目答案

【问题标题】：Rounded Corner Menu- Current Page Item圆角菜单 - 当前页面项目
【发布时间】：2014-05-29 05:20:08
【问题描述】：

我正在开发一个带有圆角菜单的网页。我在 WordPress 中使用一个主题并对其进行修改，所以我从其他人创建的东西开始。我在 CSS 和 html 方面处于中间状态——我可以把东西混在一起，但它通常不是很优雅，高级的东西超出了我的能力。

无论如何，我的问题是——当鼠标悬停在菜单项上时，菜单项会改变颜色，而当项目代表当前页面时，菜单项的颜色会有所不同。普通菜单和悬停项目有圆角，但不是当前页面项目。这仅对最左侧项目的左侧很重要。

我确实为该项目的悬停状态找到了一些 CSS，如下所示：

.menu > li:first-child:hover, 
.menu > li:first-child:hover a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; }

但是，我不知道如何采用相同的原则并将其应用于当前的项目类。这是我尝试过的：

.menu .current_page_item a > li:first-child:,
.menu  .current_menu_item a > li:first-child: {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

当然，它没有用。正如我所说，这真的是在黑暗中拍摄。

【问题讨论】：

你能展示一个演示或你的HTML代码吗？ JS Fiddle 是分享最新动态的好方法。
没问题！该网页实际上是实时的-betakateenin.com。就是顶部的菜单。希望这就足够了。如果需要更多信息，请告诉我。
所以你想要默认圆角而不是悬停？
.menu li:first-child.current_page_item { .. }
我希望在正常状态、悬停状态以及当前页面时对角进行圆角处理。 Abhitalks 拥有它的权利！加上一个小小的补充——它最终变成了 .menu li:first-child.current_page_item a {...}。但如果没有那个，我就不会到达那里。谢谢！

标签： css menu rounded-corners currentitem

【解决方案1】：

您可以选择第一个菜单项锚点：

.menu > li:first-child > a {
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}

这个目标：

the menu > the first list item inside that menu > the anchor immediately inside that list item

这比定位.current-item 类更安全，因为您试图专门定位第一个列表项以将其与现有元素混合，而.current-item 类可用于每个菜单项。

您原来的选择器语法的问题在于：

.menu .current_page_item a > li:first-child:

正在尝试选择：

the menu > the current list item > the anchor inside that item >
the first list item immediately inside that item

其中大部分不在页面的 HTML 中。

【讨论】：

解释得很好！谢谢！