nth-child() 的 CSS，但仅当也匹配一个类时

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 只是您的一次尝试的剩余部分，如果不再需要应用该规则，请务必将其删除。