Question

开平！我正在尝试修改wordpress中的导航菜单，这里是导航菜单的html部分：

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
    <h1 class="menu-toggle">Primary Menu</h1>
    <a class="screen-reader-text skip-link" href="#content">Skip to content</a>
    <div class="menu-primary-menu-container">
        <ul id="menu-primary-menu" class="nav-menu">
            <li id="menu-item-25" class="recipes menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="">Recipes</a></li>
            <li id="menu-item-26" class="wine menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="">Wine</a></li>
            <li id="menu-item-27" class="cocktails menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="">Cocktails</a></li>
        </ul>
    </div>
</nav>

这里是控制悬停时菜单项背景颜色的css部分：

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
        background-color: #24890d;
        color: #fff;
}

我希望每个菜单项在悬停时都有自己的背景颜色并尝试使用css，但它没有工作：

.primary-navigation .recipes li:hover > a,
.primary-navigation .recipes li.focus > a {
        background-color: #e5ebd5;
        color: #fff;
}

.primary-navigation .wine li:hover > a,
.primary-navigation .wine li.focus > a {
        background-color: #8d89a1;
        color: #fff;
}

.primary-navigation .cocktails li:hover > a,
.primary-navigation .cocktails li.focus > a {
        background-color: #85b0ad;
        color: #fff;
}

请告诉我我在这里做错了什么以及做正确的方法是什么？

PS：我是否还必须删除当前控制所有菜单项悬停时背景颜色的原始css部分，或者有办法覆盖它？

谢谢和问候，

Shyam Singh

Answer 1

根据我之前的评论，这就是选择器应该如何：

.primary-navigation  li.recipes:hover > a,
.primary-navigation  li.recipes:focus > a {
        background-color: #e5ebd5;
        color: #fff;
}

.primary-navigation  li.wine:hover > a,
.primary-navigation  li.wine:focus > a {
        background-color: #8d89a1;
        color: #fff;
}

.primary-navigation  li.cocktails:hover > a,
.primary-navigation  li.cocktails:focus > a {
        background-color: #85b0ad;
        color: #fff;
}

通过这种方式，您可以选择具有食谱类的li元素。目前，您正在选择食谱类中的li元素

基于BoltClock响应的编辑 还要记住，焦点是一个伪类，而不是一个类（对于伪类，你正在使用＆＃34;：＆＃34;不是＆＃34;。＆＃34;）

Demo fiddle

Answer 2

替换

.primary-navigation .recipes li:hover > a
.primary-navigation .wine li:hover > a
.primary-navigation .cocktails li:hover > a

用这个（同样用于：焦点）

.primary-navigation .recipes:hover > a
.primary-navigation .wine:hover > a
.primary-navigation .cocktails:hover > a

因为你试图在这个li元素中搜索li元素。

如何使用css选择器覆盖父子元素之间的样式？

2 个答案: