Question

我在这里看到了一些类似的问题，但没有完全相同或有答案。我希望我正在尝试做的事情是可能的。

基本上，我有一个在WordPress中生成的顶级导航。我希望滚动中的导航项目发生某些事情，如果它们是当前菜单项。但是这些东西每个导航项目都不同。我有以下CSS

.responsiveSelectContainer ul li:nth-child(1) .current-menu-item, 
.responsiveSelectContainer ul li:nth-child(1) a:hover{
    border-bottom: solid 3px #107B7E;
    color: #107B7E !important;
}

（六种导航项目为1-6，颜色不同）

a：hover部分工作得很好，但是当适当的导航项目也有current-menu-item类时，我无法使用这个CSS。

我在.current-menu-item之前尝试使用和不使用空格无效。我错过了什么？

感谢。

添加相关HTML（由WP生成）

<div class="nav responsiveSelectContainer">
    <ul id="menu-top-menu-1" class="menu responsiveSelectFullMenu">
        <li class="oneLineNav strategy menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-335"><a href="/strategy/">Strategy</a></li>
        <li class="managing-change menu-item menu-item-type-taxonomy menu-item-object-category menu-item-260"><a href="/managing-change/">Managing Change</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3365"><a href="/leadership/">Leadership</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3364"><a href="/transform/">Transformation</a></li>
        <li class="innovation-and-creativity menu-item menu-item-type-taxonomy menu-item-object-category menu-item-291"><a href="/innovation-and-creativity/">Innovation</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3369"><a href="/corporate-culture/">Corporate Culture</a></li>
    </ul>
</div>

同样，CSS适用于a：hover，而不是.current-menu-item

我还通过添加一些它所遵循的其他随机CSS来确定CSS知道.current-menu-item。

Answer 1

该课程位于li本身，因此需要使用li:nth-child(1)：

.responsiveSelectContainer ul li.current-menu-item:nth-child(1), 
.responsiveSelectContainer ul li.current-menu-item:nth-child(1) a:hover{
    border-bottom: solid 3px #107B7E;
    color: #107B7E !important;
}

（类选择器是否出现在:nth-child(1)之前或之后无关紧要，我只是把它放在常规之前。）

如果!important仅仅是您尝试之一的遗留物，请确保在规则不再需要时将其删除。

nth-child（）的CSS，但仅在匹配类

1 个答案: