css - 以无序列表中的一个元素为目标，给它一个不同的 a :hover property than the others

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