单一导航的特定背景 link

Question

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

我试过 #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>

Answer 2

您可以通过在 CSS 中使用 :last-child psuedo-class 来完成此操作。

这是一个带有修复程序的代码笔，但我将在下面描述我所做的：https://codepen.io/Athys/pen/WBdYdZ

我将 :last-child 添加到 li 选择器，因为 "contact" link 显示为最后一个列表项（最后一个 li）。然后，我向 a 选择器添加了 :hover psuedo-class 并赋予它与其他 a 元素不同的悬停颜色和 text-color。希望这可以帮助。

单一导航的特定背景 link

Specific background for single nav link

html

css

hover

nav