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

【问题标题】：How to override styles between parent - child elements using css selector?如何使用css选择器覆盖父子元素之间的样式？
【发布时间】：2014-06-04 04:01:56
【问题描述】：

嘿！我正在尝试修改 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 部分，还是有办法覆盖它？

感谢和问候，

夏姆·辛格

【问题讨论】：

你试过 !important 吗？背景颜色：#85b0ad !important;颜色：#fff！重要；等等等等
是的，我试过了，但也没有用。
尝试，作为选择器： .primary-navigation li.recipes:hover ，这样，您就是具有食谱类的选择性 li 元素。目前您正在选择食谱类中的 li 元素
效果很好，我已将您的帖子标记为答案。

标签： css wordpress css-selectors

【解决方案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 响应进行编辑 还要记住，焦点是一个伪类，而不是一个类（对于伪类，您使用的是“：”而不是“。”）

Demo fiddle

【讨论】：

它被称为伪类——属性与选择器完全不同（尽管它们都使用冒号）。

【解决方案2】：

替换

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

用这个（和 :focus 一样）

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

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

【讨论】：