仅将CSS样式应用于特定的li元素

134

Shibbir

我有这个菜单：

<ul class="elementor-nav-menu">
    <li><a href="">Locations</a></li>
    <li><a href="">Fuel</a></li>
    <li><a href="">About Us</a>
        <ul>
            <li><a href="">Sub item 1</a></li>
            <li><a href="">Sub item 2</a></li>
            <li><a href="">Sub item 3</a></li>
            <li><a href="">Sub item 4</a></li>
        </ul>
    </li>
    <li><a href="">Contact</a></li>
    <li><a href="">Find Us</a></li>
</ul>

现在，我只想向“位置”，“加油”， “悬停联系”添加border-bottom样式。

为此，我使用以下CSS：

.elementor-nav-menu li:not(:nth-child(3n)):hover {
    border-bottom: 3px solid yellow;
}

但是似乎不起作用。代码也将样式添加到我不想要的下拉菜单的最后一个元素以及最后一个元素上。

尼科·奥

此答案取决于子组合选择器，该选择器仅选择元素的直接子。

.elementor-nav-menu > li:nth-child(1):hover,
.elementor-nav-menu > li:nth-child(2):hover,
.elementor-nav-menu > li:nth-child(4):hover
{
  border-bottom: 3px solid yellow;
}

<ul class="elementor-nav-menu">
    <li><a href="">Locations</a></li>
    <li><a href="">Fuel</a></li>
    <li><a href="">About Us</a>
        <ul>
            <li><a href="">Sub item 1</a></li>
            <li><a href="">Sub item 2</a></li>
            <li><a href="">Sub item 3</a></li>
            <li><a href="">Sub item 4</a></li>
        </ul>
    </li>
    <li><a href="">Contact</a></li>
    <li><a href="">Find Us</a></li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。