html - 单个导航链接的特定背景

Question

想了解如何更改单个导航链接，使其具有与其他导航链接不同的背景悬停颜色。

我试过#nav #contact.hover 和#nav #contact:hover 都没有用。

<div id="nav">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="service"><a href="#">Service</a></li>
        <li id="parts"><a href="#">Parts</a></li>
        <li id="contact"><a href="#">Contact</a></li>
    </ul>
    <div class="clearall"></div>
</div>
</html>

CSS:

.clearall {
    clear:both;
}
#nav {
    background:#333;
}
#nav ul li {
    float:left;
    margin-right:0px;
}
#nav ul li a {
    color:#fff;
    text-transform:uppercase;
    padding:10px 20px;
    display:block;
    text-decoration:none;
}


#nav ul li a:hover {
    background-color:black;
}



Should change the contact element in the nav to have a background hover color of white

Answer 1

只需正确选择选择器即可。我认为您遇到了问题，因为您的悬停基本样式过于具体，胜过大多数覆盖。

#nav ul li:hover a

...可以很容易地更改为更容易覆盖的更简单的选择器，使用 ID 而不是类也增加了特异性问题。

.clearall {
    clear:both;
}
#nav {
    background:#333;
}
#nav ul li {
    float:left;
    margin-right:0px;
}
#nav ul li a {
    color:#fff;
    text-transform:uppercase;
    padding:10px 20px;
    display:block;
    text-decoration:none;
}
#nav ul li:hover a {
    background-color:black;
}
#nav ul li#contact:hover a {
  background: url('https://picsum.photos/100');
}

<div id="nav">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="service"><a href="#">Service</a></li>
        <li id="parts"><a href="#">Parts</a></li>
        <li id="contact"><a href="#">Contact</a></li>
    </ul>
    <div class="clearall"></div>
</div>