时间戳

首页 > 解决方案 > 仅将 CSS 样式应用于特定的 li 元素

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

问题描述

我有这个菜单：

<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;
}

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

标签： css

解决方案

这个答案依赖于子组合选择器，它只选择元素的直接子元素。

.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>

推荐阅读