css - 圆 Angular 菜单 - 当前页面元素

Question

我正在制作一个带有圆 Angular 菜单的网页。我在 WordPress 中使用一个主题并对其进行修改，所以我从其他人创建的主题开始。在 CSS 和 html 方面，我处于中庸之道 - 我可以将它们拼凑在一起，但它通常并不十分优雅，而且高级的东西超出了我的能力范围。

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

我确实找到了一些用于该元素的悬停状态的 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

您可以选择第一个菜单项 anchor :

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