1

我正在开发一个带有圆角菜单的网页。我在 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;

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

4

1 回答 1

0

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

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

于 2014-05-29T06:25:12.040 回答