Question

我正在一个有圆角菜单的网页上工作。我在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;

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

Answer 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中。

圆角菜单 - 当前页面项目

1 个答案: