Question

#nav {
    font-family: "futura-pt",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 2em;
}

#nav ul {
    display: table;
    width: 67%;
    list-style: none;
    position: absolute;
    top: 8%;
    padding-left: 30%;
}

#nav ul li {
    display: table-cell;
    text-align: center;
}

#nav ul li a {
    text-decoration: none;
    color: #252525;
    display: block;
}

#nav ul li a:hover:nth-of-type(3) {
    color: white;
}

我正在尝试将导航栏中的第三个列表项目定位为具有与其他项目不同的悬停属性。我尝试过使用id和nth-child（），但似乎无法定位它。任何帮助表示赞赏！

这也是html。

<div id="nav">
    <ul>
        <li><a href="#">On Stage</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Answer 1

您可能想要使用nth-child()。试试这个：

#nav ul li:nth-child(3):hover a {
    color: white;
}

以无序列表中的元素为目标，为其提供与其他元素不同的a：hover属性

1 个答案: